"use client" // shadcn import { Card } from "@/components/ui/card" import { ChartConfig, ChartContainer, ChartTooltip, } from "@/components/ui/chart" // third-party import { Bar, BarChart, XAxis } from "recharts" // assets import { ArrowUp, Clock, Code2, Image, MessageSquare } from "lucide-react" interface ChartDataPoint { day: string value: number formatted?: string } interface WidgetStat { id: string title: string value: string change: string comparison: string icon: typeof MessageSquare chartData: ChartDataPoint[] } interface StatCardProps { stat: WidgetStat } interface CustomTooltipProps { active?: boolean payload?: Array<{ payload: ChartDataPoint }> title?: string } function StatTooltip({ active, payload, title }: CustomTooltipProps) { if (!active || !payload || !payload.length) return null const data = payload[0].payload return (

{data.day}

{data.formatted ?? data.value} {title && ( {title} )}

) } const chartConfig = { value: { label: "Stat", }, } satisfies ChartConfig const stats: WidgetStat[] = [ { id: "total-chats", title: "Total Chats", value: "248", change: "12%", comparison: "vs. last 7 days", icon: MessageSquare, chartData: [ { day: "Mon", value: 12 }, { day: "Tue", value: 24 }, { day: "Wed", value: 18 }, { day: "Thu", value: 28 }, { day: "Fri", value: 22 }, { day: "Sat", value: 38 }, { day: "Sun", value: 48 }, ], }, { id: "code-generations", title: "Code Generations", value: "86", change: "18%", comparison: "vs. last 7 days", icon: Code2, chartData: [ { day: "Mon", value: 10 }, { day: "Tue", value: 20 }, { day: "Wed", value: 16 }, { day: "Thu", value: 30 }, { day: "Fri", value: 26 }, { day: "Sat", value: 42 }, { day: "Sun", value: 50 }, ], }, { id: "images-created", title: "Images Created", value: "42", change: "27%", comparison: "vs. last 7 days", icon: Image, chartData: [ { day: "Mon", value: 14 }, { day: "Tue", value: 18 }, { day: "Wed", value: 10 }, { day: "Thu", value: 28 }, { day: "Fri", value: 20 }, { day: "Sat", value: 40 }, { day: "Sun", value: 46 }, ], }, { id: "active-time", title: "Active Time", value: "12h 36m", change: "15%", comparison: "vs. last 7 days", icon: Clock, chartData: [ { day: "Mon", value: 12, formatted: "1h 12m" }, { day: "Tue", value: 24, formatted: "2h 24m" }, { day: "Wed", value: 18, formatted: "1h 48m" }, { day: "Thu", value: 28, formatted: "2h 48m" }, { day: "Fri", value: 22, formatted: "2h 12m" }, { day: "Sat", value: 38, formatted: "3h 48m" }, { day: "Sun", value: 48, formatted: "4h 48m" }, ], }, ] function StatCard({ stat }: StatCardProps) { const Icon = stat.icon return (

{stat.title}

{stat.value}

{stat.comparison}

} />

) } // ------------------------------ | WIDGETS 19 | ------------------------------ // export default function Widgets19() { return (

{stats.map((stat) => ( ))}

) }