feat: image variants cache panel

web/src/components/variants/CacheStatTile.vue

@@ -0,0 +1,30 @@
+<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>