extended-22

1<script setup lang="ts">
2import { Badge } from "@/registry/default/ui/badge";
3import { Card, CardContent } from "@/registry/default/ui/card";
4import { LucideArrowUpRight, LucideTrendingDown, LucideUserPlus } from "lucide-vue-next";
5 
6const cards = [
7  {
8    title: "Total Sales & Cost",
9    subtitle: "Last 60 days",
10    value: "$956.82k",
11    valueColor: "text-green-600",
12    badge: {
13      color: "bg-green-100 text-green-600 dark:bg-green-950 dark:text-green-400",
14      icon: LucideArrowUpRight,
15      iconColor: "text-green-500",
16      text: "+5.4%",
17    },
18    subtext: {
19      value: "+8.20k",
20      label: "vs prev. 60 days",
21      color: "text-green-600",
22    },
23  },
24  {
25    title: "New Customers",
26    subtitle: "This quarter",
27    value: "1,245",
28    valueColor: "text-blue-600",
29    badge: {
30      color: "bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400",
31      icon: LucideUserPlus,
32      iconColor: "text-blue-500",
33      text: "+3.2%",
34    },
35    subtext: {
36      value: "+39",
37      label: "vs last quarter",
38      color: "text-blue-600",
39    },
40  },
41  {
42    title: "Churn Rate",
43    subtitle: "Last 30 days",
44    value: "2.8%",
45    valueColor: "text-red-500",
46    badge: {
47      color: "bg-red-100 text-red-600 dark:bg-red-950 dark:text-red-400",
48      icon: LucideTrendingDown,
49      iconColor: "text-red-500",
50      text: "-1.1%",
51    },
52    subtext: {
53      value: "-0.3%",
54      label: "vs prev. 30 days",
55      color: "text-red-500",
56    },
57  },
58];
59</script>
60 
61<template>
62  <div class="*:not-first:mt-2">
63    <div class="@container w-full grow">
64      <div
65        class="bg-background border-border grid grid-cols-1 overflow-hidden rounded-xl border @3xl:grid-cols-3"
66      >
67        <Card
68          v-for="(card, i) in cards"
69          :key="i"
70          class="border-border rounded-none border-0 border-y py-4 shadow-none first:border-0 last:border-0 @3xl:border-x @3xl:border-y-0"
71        >
72          <CardContent class="flex h-full flex-col justify-between space-y-6">
73            <div class="space-y-0.25">
74              <div class="text-foreground text-base font-semibold">
75                {{ card.title }}
76              </div>
77              <div class="text-muted-foreground text-xs">
78                {{ card.subtitle }}
79              </div>
80            </div>
81 
82            <div class="flex flex-1 grow flex-col justify-between gap-1.5">
83              <div class="flex items-center gap-2">
84// … truncated