extended-23

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 {
6  LucideBriefcase,
7  LucideShoppingCart,
8  LucideTrendingDown,
9  LucideTrendingUp,
10  LucideUsers,
11} from "lucide-vue-next";
12 
13const cards = [
14  {
15    icon: LucideBriefcase,
16    iconColor: "text-green-600",
17    title: "Active Projects",
18    badge: {
19      color: "bg-green-100 text-green-600 dark:bg-green-950 dark:text-green-400",
20      icon: LucideTrendingUp,
21      iconColor: "text-green-500",
22      text: "+12.8%",
23    },
24    value: 17,
25    dateRange: "From Jan 01 - Jul 30, 2024",
26  },
27  {
28    icon: LucideShoppingCart,
29    iconColor: "text-blue-600",
30    title: "Orders Processed",
31    badge: {
32      color: "bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400",
33      icon: LucideTrendingUp,
34      iconColor: "text-blue-500",
35      text: "+3.7%",
36    },
37    value: 3421,
38    dateRange: "From Jan 01 - Jul 30, 2024",
39  },
40  {
41    icon: LucideUsers,
42    iconColor: "text-pink-600",
43    title: "Churned Users",
44    badge: {
45      color: "bg-pink-100 text-pink-600 dark:bg-pink-950 dark:text-pink-400",
46      icon: LucideTrendingDown,
47      iconColor: "text-pink-500",
48      text: "-2.1%",
49    },
50    value: 89,
51    dateRange: "From Jan 01 - Jul 30, 2024",
52  },
53];
54</script>
55 
56<template>
57  <div class="*:not-first:mt-2">
58    <div class="@container w-full grow">
59      <div class="grid grid-cols-1 gap-6 @3xl:grid-cols-3">
60        <Card v-for="(card, i) in cards" :key="i" class="py-4">
61          <CardContent class="flex h-full flex-col">
62            <div class="mb-4 flex items-center justify-between">
63              <component :is="card.icon" :class="cn('size-6', card.iconColor)" />
64 
65              <Badge :class="cn('rounded-full px-2 py-1', card.badge.color)">
66                <component :is="card.badge.icon" :class="`h-3 w-3 ${card.badge.iconColor}`" />
67                {{ card.badge.text }}
68              </Badge>
69            </div>
70 
71            <div class="flex flex-1 grow flex-col justify-between">
72              <div>
73                <div class="text-muted-foreground mb-1 text-xs font-medium">
74                  {{ card.title }}
75                </div>
76                <div class="text-foreground mb-2 text-2xl font-bold">
77                  {{ card.value.toLocaleString() }}
78                </div>
79              </div>
80// … truncated