// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats Cards 02 * @description Statistics cards with mini sparkline charts showing trend data. * Great for visualizing metrics over time. * * @slots stats, stats-container, stats-grid, stats-card, stats-content, * stats-title, stats-value, stats-change, stats-chart * @variant charts * * @registryDependencies card * @dependencies lucide-react */ import * as React from "react" import { TrendingUp, TrendingDown } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Card, CardContent } from "@/registry/ui/card" // ============================================================================ // TYPES // ============================================================================ interface StatCard { /** Unique identifier */ id: string /** Stat title */ title: string /** Stat value */ value: string /** Change percentage */ change: number /** Chart data points */ data: number[] } interface StatsCards02Props { /** Statistics to display */ stats?: StatCard[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatCard[] = [ { id: "stat-1", title: "Revenue", value: "$48,352", change: 12.5, data: [40, 45, 35, 50, 55, 60, 58] }, { id: "stat-2", title: "Users", value: "3,462", change: 8.1, data: [30, 40, 35, 50, 45, 55, 60] }, { id: "stat-3", title: "Orders", value: "876", change: -2.4, data: [50, 45, 55, 40, 45, 40, 35] }, { id: "stat-4", title: "Conversion", value: "3.2%", change: 0.8, data: [20, 25, 30, 28, 35, 32, 38] }, ] // ============================================================================ // SUB-COMPONENTS // ============================================================================ function MiniChart({ data, positive }: { data: number[]; positive: boolean }) { const max = Math.max(...data) const min = Math.min(...data) const range = max - min || 1 return (

{data.map((value, i) => (

))}

) } // ============================================================================ // COMPONENT // ============================================================================ function StatsCards02({ stats = defaultStats, className, }: StatsCards02Props) { return (

Statistics with Charts

{stats.map((stat) => (

{stat.title}

{stat.value}

= 0 ? "text-primary" : "text-destructive" )} > {stat.change >= 0 ? (

= 0} />

))}

) } export default StatsCards02 export { StatsCards02, type StatsCards02Props, type StatCard }