extended-32

1<script setup lang="ts">
2import { cn } from "@/lib/utils";
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  LucideMoreVertical,
14  LucidePin,
15  LucideSettings,
16  LucideShare2,
17  LucideShieldCheck,
18  LucideTriangleAlert,
19} from "lucide-vue-next";
20 
21const total = 30;
22const passing = 20;
23</script>
24 
25<template>
26  <div class="*:not-first:mt-2">
27    <Card class="mx-auto w-full max-w-sm py-4">
28      <CardHeader class="flex min-h-auto items-center justify-between border-0">
29        <CardTitle class="flex items-center gap-2.5">
30          <LucideShieldCheck class="text-primary h-5 w-5" />
31          <span class="text-foreground text-sm font-semibold">Compliance Checks</span>
32        </CardTitle>
33        <div class="ml-auto">
34          <DropdownMenu>
35            <DropdownMenuTrigger as-child>
36              <Button variant="ghost" size="icon" class="-me-1.5">
37                <LucideMoreVertical />
38              </Button>
39            </DropdownMenuTrigger>
40            <DropdownMenuContent align="end" side="bottom">
41              <DropdownMenuItem>
42                <LucideSettings />
43                View Details
44              </DropdownMenuItem>
45              <DropdownMenuItem>
46                <LucideTriangleAlert />
47                Export Report
48              </DropdownMenuItem>
49              <DropdownMenuItem>
50                <LucidePin />
51                Configure Alerts
52              </DropdownMenuItem>
53              <DropdownMenuSeparator />
54              <DropdownMenuItem>
55                <LucideShare2 />
56                Run Manual Check
57              </DropdownMenuItem>
58              <DropdownMenuItem>
59                <LucideShieldCheck />
60                View History
61              </DropdownMenuItem>
62            </DropdownMenuContent>
63          </DropdownMenu>
64        </div>
65      </CardHeader>
66 
67      <CardContent class="space-y-2.5 px-4">
68        <div class="flex grow gap-1">
69          <span
70            v-for="i in total"
71            :key="i - 1"
72            :class="
73              cn(
74                'inline-block h-4 w-3 rounded-sm border transition-colors',
75                i - 1 < passing ? 'border-primary bg-primary' : 'border-muted bg-muted',
76              )
77            "
78          />
79        </div>
80 
81// … truncated