56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<v-card
|
|
elevation="10"
|
|
hover
|
|
>
|
|
<v-card-item>
|
|
<div class="d-flex align-center">
|
|
<v-avatar
|
|
:color="color"
|
|
size="56"
|
|
class="mr-4"
|
|
>
|
|
<slot name="icon"></slot>
|
|
</v-avatar>
|
|
<div>
|
|
<v-card-title class="text-h5">{{ title }}</v-card-title>
|
|
<v-card-subtitle>{{ subtitle }}</v-card-subtitle>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-text>
|
|
<div class="d-flex align-center justify-space-between">
|
|
<span class="text-h3 font-weight-bold">{{ count ?? " " }}</span>
|
|
<v-icon
|
|
size="large"
|
|
:color="color"
|
|
>
|
|
mdi-chevron-right
|
|
</v-icon>
|
|
</div>
|
|
<div class="text-caption text-medium-emphasis mt-1">{{ countLabel }}</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
title: string
|
|
subtitle?: string
|
|
count?: number | null
|
|
countLabel?: string
|
|
color?: string
|
|
}>(),
|
|
{
|
|
subtitle: "",
|
|
count: null,
|
|
countLabel: "",
|
|
color: "primary",
|
|
}
|
|
)
|
|
</script>
|