Skeleton loader for a dashboard stats row

<script setup lang="ts">
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

const cards = Array.from({ length: 3 })
</script>

<template>
  <div class="mx-auto grid w-full max-w-lg grid-cols-3 gap-4">
    <Card v-for="(_, i) in cards" :key="i">
      <CardHeader class="pb-2">
        <Skeleton class="h-3 w-16" />
      </CardHeader>
      <CardContent class="space-y-2">
        <Skeleton class="h-7 w-24" />
        <Skeleton class="h-3 w-20" />
      </CardContent>
    </Card>
  </div>
</template>