// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats Cards 04 * @description Comparison stats cards with period-over-period change. * Stats with previous value comparison and change indicators. * * @slots stats, stats-container, stats-grid, stats-card, stats-card-header, * stats-card-title, stats-card-period, stats-card-content, stats-card-value, * stats-card-comparison, stats-card-previous, stats-card-change * @variant comparison * * @registryDependencies card * @dependencies lucide-react */ import * as React from "react" import { TrendingUp, TrendingDown, Minus } from "lucide-react" import { Card, CardContent, CardHeader } from "@/registry/ui/card" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatCardConfig { id: string title: string currentValue: string previousValue: string change: number period: string } interface StatsCards04Props { stats?: StatCardConfig[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatCardConfig[] = [ { id: "stat-1", title: "Total Revenue", currentValue: "$45,231", previousValue: "$38,420", change: 17.7, period: "vs last month", }, { id: "stat-2", title: "New Customers", currentValue: "1,234", previousValue: "1,180", change: 4.6, period: "vs last month", }, { id: "stat-3", title: "Avg Order Value", currentValue: "$89.50", previousValue: "$92.10", change: -2.8, period: "vs last month", }, { id: "stat-4", title: "Conversion Rate", currentValue: "3.24%", previousValue: "3.24%", change: 0, period: "vs last month", }, ] // ============================================================================ // COMPONENT // ============================================================================ function StatsCards04({ stats = defaultStats, className, idBase = "stats-cards-04", }: StatsCards04Props) { return (

{stats.map((stat) => (

{stat.title} {stat.period}

{stat.currentValue}

from {stat.previousValue}

0 && "text-green-600", stat.change < 0 && "text-red-600", stat.change === 0 && "text-muted-foreground" )} > {stat.change > 0 &&

))}

) } export default StatsCards04 export { StatsCards04, type StatsCards04Props }