extended-20

1<script setup lang="ts">
2import { Badge } from "@/registry/default/ui/badge";
3import { Button } from "@/registry/default/ui/button";
4import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuItem,
9  DropdownMenuSeparator,
10  DropdownMenuTrigger,
11} from "@/registry/default/ui/dropdown-menu";
12import {
13  LucideArrowDown,
14  LucideArrowUp,
15  LucideMoreHorizontal,
16  LucidePin,
17  LucideSettings,
18  LucideShare2,
19  LucideTrash,
20  LucideTriangleAlert,
21} from "lucide-vue-next";
22 
23const stats = [
24  {
25    title: "All Orders",
26    value: 122380,
27    delta: 15.1,
28    lastMonth: 105922,
29    positive: true,
30    prefix: "",
31    suffix: "",
32  },
33  {
34    title: "Order Created",
35    value: 1902380,
36    delta: -2.0,
37    lastMonth: 2002098,
38    positive: false,
39    prefix: "",
40    suffix: "",
41  },
42  {
43    title: "Organic Sales",
44    value: 98100000,
45    delta: 0.4,
46    lastMonth: 97800000,
47    positive: true,
48    prefix: "$",
49    suffix: "M",
50    format: (v: number) => `$${(v / 1_000_000).toFixed(1)}M`,
51    lastFormat: (v: number) => `$${(v / 1_000_000).toFixed(1)}M`,
52  },
53  {
54    title: "Active Users",
55    value: 48210,
56    delta: 3.7,
57    lastMonth: 46480,
58    positive: true,
59    prefix: "",
60    suffix: "",
61  },
62];
63 
64function formatNumber(n: number) {
65  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
66  if (n >= 1_000) return n.toLocaleString();
67  return n.toString();
68}
69</script>
70 
71<template>
72  <div class="*:not-first:mt-2">
73    <div class="grid grow grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
74      <Card v-for="(stat, index) in stats" :key="index" class="py-4">
75        <CardHeader class="flex items-center justify-between border-0">
76          <CardTitle class="text-muted-foreground text-sm font-medium">
77            {{ stat.title }}
78          </CardTitle>
79          <div class="ml-auto">
80            <DropdownMenu>
81              <DropdownMenuTrigger as-child>
82                <Button variant="ghost" size="icon" class="-me-1.5">
83                  <LucideMoreHorizontal />
84                </Button>
85              </DropdownMenuTrigger>
86              <DropdownMenuContent align="end" side="bottom">
87                <DropdownMenuItem>
88                  <LucideSettings />
89                  Settings
90                </DropdownMenuItem>
91                <DropdownMenuItem>
92                  <LucideTriangleAlert />
93                  Add Alert
94                </DropdownMenuItem>
95// … truncated