/
CardStatsComponent.vue
48 lines (42 loc) · 1.64 KB
/
CardStatsComponent.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
<template #title>
<v-card-title class="d-flex align-center">
<component :is="iconComponent" v-if="icon" v-bind="iconProps" class="mr-2" width="16" height="16" />
{{ title }}
</v-card-title>
</template>
<v-card-text>
<v-chip rounded color="default" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
</v-card-text>
</v-card>
</template>
<script setup lang="ts">
import { computed, Component } from 'vue';
import { VCard, VCardText, VChip, VCardTitle } from 'vuetify/components';
import IconFile from '@poc/components/icons/IconFile.vue';
import IconGlobe from '@poc/components/icons/IconGlobe.vue';
import IconBucket from '@poc/components/icons/IconBucket.vue';
import IconAccess from '@poc/components/icons/IconAccess.vue';
import IconTeam from '@poc/components/icons/IconTeam.vue';
import IconCard from '@poc/components/icons/IconCard.vue';
const props = defineProps<{
title: string;
subtitle: string;
data: string;
to: string;
icon?: keyof typeof iconComponents;
}>();
const iconComponents = {
file: IconFile,
globe: IconGlobe,
bucket: IconBucket,
access: IconAccess,
team: IconTeam,
card: IconCard,
};
const iconComponent = computed<Component | null>(() => props.icon ? iconComponents[props.icon] : null);
const iconProps = computed<object | null>(() => iconComponent.value?.['props']?.['bold'] ? { bold: true } : null);
</script>