31 lines
815 B
Vue
31 lines
815 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
icon: string
|
|
label: string
|
|
value?: string
|
|
sub?: string
|
|
loading?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<UCard
|
|
data-testid="cache-tile"
|
|
:ui="{
|
|
root: 'min-w-0 rounded-none border border-default bg-default ring-0',
|
|
body: 'flex min-w-0 flex-col gap-1 p-3 sm:p-4',
|
|
}"
|
|
>
|
|
<div class="flex items-center gap-1.5 text-sm text-muted">
|
|
<UIcon :name="icon" class="size-3.5 shrink-0" />
|
|
<span>{{ label }}</span>
|
|
</div>
|
|
<USkeleton v-if="loading" class="h-7 w-[60%] rounded-none bg-accented" />
|
|
<span v-else class="text-stat-sm/9 font-semibold text-highlighted sm:text-2xl/9">
|
|
{{ value }}
|
|
</span>
|
|
<USkeleton v-if="loading" class="h-2.75 w-[40%] rounded-none bg-accented" />
|
|
<span v-else class="text-xs text-muted">{{ sub }}</span>
|
|
</UCard>
|
|
</template>
|