Overlay loading spinner

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

<template>
  <div class="w-full max-w-xs overflow-hidden">
    <!-- Card -->
    <Card>
      <CardHeader>
        <CardTitle>Monthly Report</CardTitle>
        <CardDescription>Revenue and growth metrics.</CardDescription>
      </CardHeader>
      <CardContent class="space-y-3">
        <div class="flex items-center justify-between text-sm">
          <span class="text-muted-foreground">Revenue</span>
          <span class="font-medium">$12,450</span>
        </div>
        <div class="flex items-center justify-between text-sm">
          <span class="text-muted-foreground">Growth</span>
          <span class="font-medium">+18.2%</span>
        </div>
        <div class="flex items-center justify-between text-sm">
          <span class="text-muted-foreground">Users</span>
          <span class="font-medium">1,248</span>
        </div>
      </CardContent>
    </Card>

    <!-- Overlay -->
    <Card class="bg-background/80 absolute inset-0 z-10 backdrop-blur-xs">
      <CardContent class="flex grow flex-col items-center justify-center gap-2">
        <Spinner class="size-5 opacity-60" />
        <span class="text-muted-foreground text-sm">
          Refreshing data...
        </span>
      </CardContent>
    </Card>
  </div>
</template>