Spinner overlay on card

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

<template>
  <Card class="relative w-full max-w-xs">
    <CardContent class="space-y-3 p-4">
      <h3 class="text-sm font-semibold">Dashboard Overview</h3>
      <p class="text-muted-foreground text-sm">
        Monthly revenue and user statistics for the current period.
      </p>
      <div class="grid grid-cols-2 gap-4">
        <div class="rounded-md border p-3">
          <p class="text-muted-foreground text-xs">Revenue</p>
          <p class="text-lg font-bold">$12,450</p>
        </div>
        <div class="rounded-md border p-3">
          <p class="text-muted-foreground text-xs">Users</p>
          <p class="text-lg font-bold">1,234</p>
        </div>
      </div>
    </CardContent>

    <!-- Overlay -->
    <Card class="bg-background/80 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-xs">
      <CardContent class="flex grow flex-col items-center justify-center gap-2">
        <Spinner class="size-4 opacity-60" />
      </CardContent>
    </Card>
  </Card>
</template>