// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Grid View 07 * @description A dashboard stats grid showing metrics and KPIs in card format. * Great for analytics dashboards, admin panels, or overview pages. * * @slots grid-view, grid-view-container, grid-view-header, grid-view-badge, * grid-view-heading, grid-view-description, grid-view-grid, grid-view-card, * grid-view-card-icon, grid-view-card-content, grid-view-card-value, * grid-view-card-label, grid-view-card-trend, grid-view-card-trend-icon, * grid-view-card-trend-text, grid-view-card-chart * @variant dashboard-stats * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Users, ShoppingCart, DollarSign, Eye, TrendingUp, TrendingDown, LineChart, Mail, } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type IconType = "users" | "cart" | "dollar" | "eye" | "chart" | "mail" type TrendDirection = "up" | "down" interface StatItem { id: string label: string value: string icon: IconType trend?: number trendDirection?: TrendDirection sparklineData?: number[] } interface GridView07Props { sectionBadge?: string heading?: string description?: string stats?: StatItem[] className?: string idBase?: string } // ============================================================================ // ICON MAP // ============================================================================ const iconMap: Record = { users: Users, cart: ShoppingCart, dollar: DollarSign, eye: Eye, chart: LineChart, mail: Mail, } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatItem[] = [ { id: "stat-1", label: "Total Users", value: "24,589", icon: "users", trend: 12.5, trendDirection: "up", sparklineData: [30, 40, 35, 50, 49, 60, 70], }, { id: "stat-2", label: "Total Orders", value: "1,432", icon: "cart", trend: 8.2, trendDirection: "up", sparklineData: [20, 30, 25, 40, 35, 45, 55], }, { id: "stat-3", label: "Revenue", value: "$89,432", icon: "dollar", trend: 2.4, trendDirection: "down", sparklineData: [60, 55, 50, 45, 48, 42, 40], }, { id: "stat-4", label: "Page Views", value: "1.2M", icon: "eye", trend: 24.8, trendDirection: "up", sparklineData: [40, 45, 50, 55, 65, 75, 90], }, { id: "stat-5", label: "Conversion Rate", value: "3.24%", icon: "chart", trend: 5.1, trendDirection: "up", sparklineData: [25, 28, 30, 32, 35, 38, 42], }, { id: "stat-6", label: "Email Subscribers", value: "8,721", icon: "mail", trend: 1.2, trendDirection: "down", sparklineData: [50, 48, 47, 45, 44, 43, 42], }, ] // ============================================================================ // SPARKLINE COMPONENT // ============================================================================ function Sparkline({ data, className }: { data: number[]; className?: string }) { const max = Math.max(...data) const min = Math.min(...data) const range = max - min || 1 const width = 100 const height = 32 const padding = 2 const points = data .map((value, index) => { const x = (index / (data.length - 1)) * (width - padding * 2) + padding const y = height - padding - ((value - min) / range) * (height - padding * 2) return `${x},${y}` }) .join(" ") return ( ) } // ============================================================================ // COMPONENT // ============================================================================ function GridView07({ sectionBadge = "Dashboard", heading = "Key Metrics", description = "An overview of your most important performance indicators.", stats = defaultStats, className, idBase = "grid-view-07", }: GridView07Props) { const headingId = `${idBase}-heading` return (

{/* Header */}

{sectionBadge}

{heading}

{description && (

{description}

)}

{/* Grid */}

{stats.map((stat) => { const Icon = iconMap[stat.icon] return (

{/* Icon */}

{/* Trend */} {stat.trend !== undefined && (

{stat.trendDirection === "up" ? (

)}

{/* Content */}

{stat.value}

{stat.label}

{/* Sparkline */} {stat.sparklineData && (

)}

) })}

) } export default GridView07 export { GridView07, type GridView07Props }