Expandable Tabs Demo

1"use client";
2 
3import {
4  BadgeCheck,
5  Brush,
6  CalendarClock,
7  ChartSpline,
8  ChevronRight,
9  ClipboardCheck,
10  CloudUpload,
11  FileText,
12  Gauge,
13  GitBranch,
14  Images,
15  Inbox,
16  type LucideIcon,
17  Megaphone,
18  MessageCircle,
19  PackageOpen,
20  RefreshCw,
21  Rocket,
22  Siren,
23  SwatchBook,
24  UploadCloud,
25  Users,
26  Webhook,
27  Workflow,
28} from "lucide-react";
29import {
30  type ExpandableTab,
31  ExpandableTabs,
32} from "@/components/sora-ui/disclosure/expandable-tabs";
33 
34function Row({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
35  return (
36    <button
37      className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left font-medium text-foreground text-sm transition-colors hover:bg-muted"
38      type="button"
39    >
40      <Icon className="h-4 w-4 text-muted-foreground" />
41      <span className="flex-1">{label}</span>
42      <ChevronRight className="h-4 w-4 text-muted-foreground" />
43    </button>
44  );
45}
46 
47function Menu({ rows }: { rows: { icon: LucideIcon; label: string }[] }) {
48  return (
49    <div className="flex w-68.5 flex-col gap-0.5">
50      {rows.map((row) => (
51        <Row icon={row.icon} key={row.label} label={row.label} />
52      ))}
53    </div>
54  );
55}
56 
57const TABS: ExpandableTab[] = [
58  {
59    id: "launch",
60    label: "Launch",
61    icon: Rocket,
62    content: (
63      <Menu
64        rows={[
65          { icon: FileText, label: "Release Brief" },
66          { icon: ClipboardCheck, label: "Launch Checklist" },
67          { icon: Megaphone, label: "Campaign Notes" },
68          { icon: CalendarClock, label: "Rollout Calendar" },
69          { icon: CloudUpload, label: "Ship Build" },
70        ]}
71      />
72    ),
73  },
74  {
75    id: "inbox",
76    label: "Inbox",
77    icon: Inbox,
78    content: (
79      <Menu
80        rows={[
81          { icon: MessageCircle, label: "Client Feedback" },
82          { icon: Users, label: "Team Requests" },
83          { icon: BadgeCheck, label: "Approval Notes" },
84        ]}
85      />
86    ),
87  },
88  {
89    id: "flows",
90    label: "Flows",
91    icon: Workflow,
92    content: (
93      <Menu
94        rows={[
95          { icon: GitBranch, label: "Trigger Map" },
96          { icon: Webhook, label: "Webhook Runs" },
97          { icon: RefreshCw, label: "Retry Queue" },
98        ]}
99      />
100    ),
101  },
102  {
103    id: "assets",
104    label: "Assets",
105    icon: PackageOpen,
106    content: (
107      <Menu
108        rows={[
109          { icon: SwatchBook, label: "Brand Kit" },
110          { icon: Images, label: "Mockup Library" },
111// … truncated