f8927b426e
resolves #47 Co-authored-by: johba <johba@harb.eth> Reviewed-on: https://codeberg.org/johba/harb/pulls/54
60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<div class="stats-output" :styles="styles">
|
|
<FCard>
|
|
<h6>{{ props.headline }}</h6>
|
|
<FOutput :name="props.name" :price="props.price">
|
|
<template #price>
|
|
<slot name="price"></slot>
|
|
</template>
|
|
</FOutput>
|
|
</FCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import FCard from '@/components/fcomponents/FCard.vue';
|
|
import FOutput from '@/components/fcomponents/FOutput.vue';
|
|
interface Props {
|
|
name?: string;
|
|
headline: string;
|
|
price: string | number;
|
|
width?: number;
|
|
}
|
|
|
|
interface Styles {
|
|
width?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
name: '',
|
|
width: undefined,
|
|
});
|
|
|
|
const styles = computed(() => {
|
|
const returnObject: Styles = {};
|
|
if (props.width) {
|
|
returnObject.width = `${props.width}px`;
|
|
}
|
|
return returnObject;
|
|
});
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.stats-output
|
|
.f-card
|
|
background-color: var(--color-secondary)
|
|
h6
|
|
margin: 0
|
|
font-size: 16px
|
|
letter-spacing: 0.15px
|
|
font-weight: 300
|
|
.f-card__body
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
padding: 8px
|
|
height: 100%
|
|
.token-price-wrapper
|
|
padding: 8px 16px
|
|
</style>
|