"use client"; import { Minus, TrendingDown, TrendingUp } from "lucide-react"; import { cn } from "@/lib/utils"; type Tone = | "neutral" | "primary" | "foreground" | "emerald" | "sky" | "violet" | "amber" | "rose"; type Trend = "up" | "down" | "flat"; interface Monitoring10Props { label?: string; value?: string; unit?: string; delta?: string; trend?: Trend; tone?: Tone; className?: string; } const trendIcon: Record = { up: TrendingUp, down: TrendingDown, flat: Minus, }; const deltaClasses: Record = { neutral: "bg-muted text-muted-foreground", primary: "bg-primary/10 text-primary", foreground: "bg-foreground/10 text-foreground", emerald: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400", sky: "bg-sky-500/10 text-sky-700 dark:text-sky-400", violet: "bg-violet-500/10 text-violet-700 dark:text-violet-400", amber: "bg-amber-500/10 text-amber-700 dark:text-amber-400", rose: "bg-rose-500/10 text-rose-700 dark:text-rose-400", }; export const monitoring10Demo: Monitoring10Props = { label: "Requests", value: "12.4K", unit: "req/s", delta: "+12%", trend: "up", tone: "emerald", }; export function Monitoring10({ label = "Throughput", value = "0", unit, delta, trend = "up", tone = "emerald", className, }: Monitoring10Props) { const Icon = trendIcon[trend]; return (

{label}

{value} {unit && ( {unit} )}

{delta && ( )}

); }