"use client"; import { Button, Badge, Input, Progress, Avatar, Switch, Label, Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent, BentoGrid, BentoGridCell, Collapsible, CollapsibleTrigger, CollapsibleContent, } from "@sigil-ui/components"; import { DemoShell, Panel, PanelSpacer, PanelHeader, PlaceholderImage, } from "./_shell"; const STATS = [ { label: "Users", value: "12,847", change: "+12.5%", positive: true }, { label: "Revenue", value: "$48.2K", change: "+8.1%", positive: true }, { label: "Uptime", value: "98.5%", change: "", positive: true }, { label: "Avg Load", value: "2.4s", change: "", positive: false }, ]; const EVENTS = [ { name: "Deployment succeeded", time: "2 min ago" }, { name: "User signup — kate@acme.co", time: "8 min ago" }, { name: "Invoice #1042 paid", time: "23 min ago" }, { name: "SSL certificate renewed", time: "1 hr ago" }, { name: "Backup completed", time: "3 hr ago" }, { name: "Webhook fired → /api/sync", time: "5 hr ago" }, ]; const API_KEYS = [ { name: "Production", key: "sk-prod-••••••••••••3f9a" }, { name: "Staging", key: "sk-stag-••••••••••••b2c1" }, { name: "Development", key: "sk-dev-•••••••••••••e47d" }, ]; const TEAM = [ { name: "KL", color: "var(--s-primary)" }, { name: "AM", color: "color-mix(in oklch, var(--s-primary) 60%, var(--s-text))" }, { name: "JR", color: "color-mix(in oklch, var(--s-primary) 40%, var(--s-surface))" }, { name: "TS", color: "color-mix(in oklch, var(--s-primary) 80%, var(--s-background))" }, ]; export default function DashboardDemo() { return ( {/* ── Navbar ──────────────────────────────────────────────── */}

Dashboard

{/* ── Overview Stats ─────────────────────────────────────── */} Overview {STATS.map((s) => (

{s.label}

{s.value} {s.change && ( {s.change} )}

))} {/* ── Analytics Tabs ─────────────────────────────────────── */} Analytics

Traffic Revenue Users

{/* ── Recent Events ──────────────────────────────────────── */} Recent Events

{EVENTS.map((ev) => (

{ev.name} {ev.time}

))}

{/* ── Settings ───────────────────────────────────────────── */} Settings

Notifications

API Keys

{API_KEYS.map((k) => (

{k.name} {k.key}

))}

Team

{TEAM.map((t) => ( ))}

{/* ── Footer ──────────────────────────────────────────────── */}

); } function ProgressRow({ label, value }: { label: string; value: number }) { return (

{label} {value}%

); } function NotifRow({ id, label, defaultChecked = false, }: { id: string; label: string; defaultChecked?: boolean; }) { return (

{label}

); }