import * as React from "react" import { TrendingDown, TrendingUp, Minus } from "lucide-react" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader } from "@/components/ui/card" export type StatTrend = "up" | "down" | "neutral" export interface StatCardProps { /** Short label describing the metric. */ label: string /** Formatted metric value, e.g. "$4,200" or "1,024". */ value: string /** Direction of change since the previous period. */ trend?: StatTrend /** Percentage change shown in the badge, e.g. 12.5 renders "+12.5%". */ trendPercent?: number className?: string } const trendConfig: Record< StatTrend, { icon: React.ElementType; label: string; badge: string } > = { up: { icon: TrendingUp, label: "Trending up", badge: "text-success bg-success/10 border-success/20", }, down: { icon: TrendingDown, label: "Trending down", badge: "text-destructive bg-destructive/10 border-destructive/20", }, neutral: { icon: Minus, label: "No change", badge: "text-muted-foreground bg-muted border-border", }, } /** * Dashboard metric card displaying a label, value, and optional trend badge. * Trend direction is communicated visually and via `aria-label` for accessibility. */ export function StatCard({ label, value, trend, trendPercent, className, }: StatCardProps) { const hasTrend = trend !== undefined && trendPercent !== undefined const config = trend ? trendConfig[trend] : null const TrendIcon = config?.icon const sign = trend === "up" ? "+" : trend === "down" ? "-" : "" const percentLabel = hasTrend ? `${sign}${Math.abs(trendPercent!).toFixed(1)}%` : null return (

{label}

{value} {hasTrend && config && TrendIcon && ( )}

) }

Prop	Type	Required	Description
`label`	`string`	yes	Short metric label.
`value`	`string`	yes	Formatted value, e.g. "$4,200".
`trend`	`"up" \| "down" \| "neutral"`	—	Direction of change.
`trendPercent`	`number`	—	Percentage change shown in the badge.