"use client"; import type { LucideIcon } from "lucide-react"; import { AlertTriangle, Info, OctagonX } from "lucide-react"; import { cn } from "@/lib/utils"; type Severity = "critical" | "warning" | "info"; interface Dashboard20Props { counts?: Record; criticalLabel?: string; warningLabel?: string; infoLabel?: string; className?: string; } const SEVERITIES: Record< Severity, { icon: LucideIcon; classes: string } > = { critical: { icon: OctagonX, classes: "bg-rose-500/15 text-rose-600 dark:text-rose-400", }, warning: { icon: AlertTriangle, classes: "bg-amber-500/15 text-amber-600 dark:text-amber-400", }, info: { icon: Info, classes: "bg-sky-500/15 text-sky-600 dark:text-sky-400", }, }; export const dashboard20Demo: Dashboard20Props = { counts: { critical: 2, warning: 6, info: 14 }, criticalLabel: "Critical", warningLabel: "Warning", infoLabel: "Info", }; export function Dashboard20({ counts = { critical: 0, warning: 0, info: 0 }, criticalLabel = "Critical", warningLabel = "Warning", infoLabel = "Info", className, }: Dashboard20Props) { const order: Severity[] = ["critical", "warning", "info"]; const labels: Record = { critical: criticalLabel, warning: warningLabel, info: infoLabel, }; return (

{order.map((k) => { const cfg = SEVERITIES[k]; const Icon = cfg.icon; const n = counts[k] ?? 0; return (

{n} {labels[k]}

); })}

); }