extended-29

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 { LucideBarChart2, LucideMoreHorizontal } from "lucide-vue-next";
13</script>
14 
15<template>
16  <div class="*:not-first:mt-2">
17    <Card class="mx-auto w-full max-w-md">
18      <CardHeader class="flex min-h-auto items-center justify-between border-0">
19        <CardTitle class="inline-flex items-center gap-2">
20          <LucideBarChart2 class="text-primary size-8" />
21          Total Revenue
22        </CardTitle>
23        <div class="ml-auto">
24          <DropdownMenu>
25            <DropdownMenuTrigger as-child>
26              <Button variant="ghost" size="icon">
27                <LucideMoreHorizontal class="size-4" />
28              </Button>
29            </DropdownMenuTrigger>
30            <DropdownMenuContent align="end" side="bottom">
31              <DropdownMenuItem>Settings</DropdownMenuItem>
32              <DropdownMenuItem>Export Data</DropdownMenuItem>
33              <DropdownMenuItem>Pin to Dashboard</DropdownMenuItem>
34              <DropdownMenuSeparator />
35              <DropdownMenuItem variant="destructive">Remove</DropdownMenuItem>
36            </DropdownMenuContent>
37          </DropdownMenu>
38        </div>
39      </CardHeader>
40      <CardContent class="flex flex-col justify-between gap-3.5">
41        <div class="space-y-3.5">
42          <div class="mb-2.5 flex items-center gap-2.5">
43            <span class="text-foreground text-3xl font-bold tracking-tight">$ 1,120,500</span>
44            <span class="text-muted-foreground text-xs leading-none font-medium">USD</span>
45          </div>
46 
47          <div class="mb-4 flex items-center gap-2">
48            <Badge variant="destructive">
49              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="inline-block">
50                <path
51                  d="M3 5.5L7 9.5L11 5.5"
52                  stroke="currentColor"
53                  stroke-width="1.5"
54                  stroke-linecap="round"
55                  stroke-linejoin="round"
56                />
57              </svg>
58              -12.7%
59            </Badge>
60            <span class="text-muted-foreground text-sm">decreased from last quarter</span>
61          </div>
62// … truncated