extended-31

1<script setup lang="ts">
2import { cn } from "@/lib/utils";
3import { Badge } from "@/registry/default/ui/badge";
4import { Card, CardContent } from "@/registry/default/ui/card";
5import { LucideCheckCircle2, LucideLifeBuoy, LucideSmile } from "lucide-vue-next";
6 
7const cards = [
8  {
9    icon: LucideLifeBuoy,
10    iconBg: "border-blue-200 dark:border-blue-800 text-blue-600 dark:text-blue-400",
11    value: 320,
12    label: "Support Tickets",
13    info: {
14      variant: "secondary",
15      text: "12 Open, 308 Closed",
16    },
17  },
18  {
19    icon: LucideCheckCircle2,
20    iconBg: "border-green-200 dark:border-green-800 text-green-600 dark:text-green-400",
21    value: "98%",
22    label: "Resolved",
23    info: {
24      variant: "default",
25      text: "+2.1% this month",
26    },
27  },
28  {
29    icon: LucideSmile,
30    iconBg: "border-yellow-200 dark:border-yellow-800 text-yellow-600 dark:text-yellow-400",
31    value: "4.8",
32    label: "Satisfaction Rate",
33    info: {
34      variant: "secondary",
35      text: "Avg. (out of 5)",
36    },
37  },
38] as const;
39</script>
40 
41<template>
42  <div class="*:not-first:mt-2">
43    <div class="@container w-full grow">
44      <div class="grid max-w-5xl grow grid-cols-1 gap-5 @3xl:grid-cols-3">
45        <Card v-for="(card, i) in cards" :key="i" class="py-4">
46          <CardContent class="flex flex-col items-start gap-4 px-4">
47            <div
48              :class="cn('flex size-12 items-center justify-center rounded-xl border', card.iconBg)"
49            >
50              <component :is="card.icon" class="size-6" />
51            </div>
52            <div class="space-y-0.5">
53              <div class="text-foreground text-2xl leading-none font-bold">
54                {{ card.value }}
55              </div>
56              <div class="text-muted-foreground text-sm">{{ card.label }}</div>
57            </div>
58 
59            <Badge :variant="card.info.variant">
60              {{ card.info.text }}
61            </Badge>
62          </CardContent>
63        </Card>
64      </div>
65    </div>
66    <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
67      Ported from reui.io support metrics cards
68      <a
69        class="hover:text-foreground underline"
70        href="https://reui.io/blocks/cards"
71        target="_blank"
72        rel="noopener nofollow"
73      >
74        reui.io
75      </a>
76    </p>
77  </div>
78</template>