@lmy54321/design-system 1.1.3 → 1.2.0

package/template/src/pages/ComponentLibrary.tsx

@@ -0,0 +1,1049 @@
+import React, { useState } from "react";
+import { cn } from "../../components/ui/utils";
+import { Btn } from "../../components/ui/Btn";
+import { Switch } from "../../components/ui/Switch";
+import { Tag } from "../../components/ui/Tag";
+import { Loading } from "../../components/ui/Loading";
+import { SegmentedControl } from "../../components/ui/SegmentedControl";
+import { SearchBox } from "../../components/ui/SearchBox";
+import { Dialog } from "../../components/ui/Dialog";
+import { Toast } from "../../components/ui/Toast";
+import { NotificationBar } from "../../components/ui/NotificationBar";
+import { ActionSheet } from "../../components/ui/ActionSheet";
+import { TopToolbar } from "../../components/ui/TopToolbar";
+import { BottomNavigationBar } from "../../components/ui/BottomNavigationBar";
+import { BottomActionButtons } from "../../components/ui/BottomActions/BottomActionButtons";
+import { DraggablePanel, DRAWER_STATES } from "../../components/ui/DraggablePanel";
+import { TypographyDocs } from "../../components/ui/TypographyDocs";
+import { GridSystemDocs } from "../../components/ui/GridSystemDocs";
+import { BubbleTip } from "../../components/ui/BubbleTip";
+import { Push } from "../../components/ui/Push";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { StatGrid } from "../../components/ui/StatGrid";
+import { IconGallery } from "../../components/ui/IconGallery";
+import { CardDemo } from "../../components/ui/CardDemo";
+
+// ============ Color System Data ============
+type ColorToken = {
+  variable: string;
+  group: string;
+  light: string;
+  lightLabel: string;
+  dark: string;
+  darkLabel: string;
+  description: string;
+};
+
+const TEXT_COLORS: ColorToken[] = [
+  { variable: "text_primary_black", group: "Map", light: "rgba(0,0,0,0.9)", lightLabel: "#000000 90%", dark: "rgba(255,255,255,0.9)", darkLabel: "#FFFFFF 90%", description: "默认的一级文本颜色" },
+  { variable: "text_secondary_black", group: "Map", light: "rgba(0,0,0,0.7)", lightLabel: "#000000 70%", dark: "rgba(255,255,255,0.7)", darkLabel: "#FFFFFF 70%", description: "第二层级的文本颜色，例如标签文本等" },
+  { variable: "text_tertiary_black", group: "Map", light: "rgba(0,0,0,0.42)", lightLabel: "#000000 42%", dark: "rgba(255,255,255,0.42)", darkLabel: "#FFFFFF 42%", description: "第三层级的文本颜色，例如表单的补充说明文本等" },
+  { variable: "text_primary_white", group: "Map", light: "#FFFFFF", lightLabel: "#FFFFFF 100%", dark: "#000000", darkLabel: "#000000", description: "默认的一级文本颜色" },
+  { variable: "text_secondary_white", group: "Map", light: "rgba(255,255,255,0.7)", lightLabel: "#FFFFFF 70%", dark: "rgba(0,0,0,0.7)", darkLabel: "#000000 70%", description: "第二层级的文本颜色" },
+  { variable: "text_tertiary_white", group: "Map", light: "rgba(255,255,255,0.35)", lightLabel: "#FFFFFF 35%", dark: "rgba(0,0,0,0.35)", darkLabel: "#000000 35%", description: "第三层级的文本颜色" },
+  { variable: "text_warning", group: "Map", light: "#FF293B", lightLabel: "#FF293B", dark: "#FF293B", darkLabel: "#FF293B", description: "用于警告信息的默认文本颜色" },
+  { variable: "text_link", group: "Map", light: "#4C81EE", lightLabel: "#4C81EE", dark: "#4C81EE", darkLabel: "#4C81EE", description: "链接文本的默认颜色" },
+];
+
+const BUTTON_COLORS: ColorToken[] = [
+  { variable: "button_primary", group: "Map", light: "#4B526B", lightLabel: "#4B526B", dark: "#DEE0E8", darkLabel: "#DEE0E8", description: "一级按钮颜色" },
+  { variable: "button_secondary", group: "Map", light: "rgba(75,82,107,0.08)", lightLabel: "#4B526B 8%", dark: "rgba(204,214,255,0.16)", darkLabel: "#CCD6FF 16%", description: "二级按钮颜色" },
+  { variable: "button_warning", group: "Alias", light: "#FFD1D5", lightLabel: "#FFD1D5", dark: "#FF293B", darkLabel: "#FF293B", description: "警示按钮颜色" },
+  { variable: "button_blue_solid", group: "Alias", light: "#367BF6", lightLabel: "#367BF6", dark: "#367BF6", darkLabel: "#367BF6", description: "蓝色实心按钮" },
+];
+
+const BG_COLORS: ColorToken[] = [
+  { variable: "card_background_primary", group: "Map", light: "#FFFFFF", lightLabel: "#FFFFFF", dark: "#000000", darkLabel: "#000000", description: "卡片主背景" },
+  { variable: "card_background_secondary", group: "Map", light: "rgba(255,255,255,0.9)", lightLabel: "#FFFFFF 90%", dark: "rgba(0,0,0,0.9)", darkLabel: "#000000 90%", description: "卡片次级背景" },
+  { variable: "container_bg_secondary", group: "Map", light: "rgba(75,82,107,0.04)", lightLabel: "#4B526B 4%", dark: "rgba(224,229,255,0.1)", darkLabel: "#E0E5FF 10%", description: "容器灰色背景" },
+  { variable: "overlay_background", group: "Map", light: "rgba(0,0,0,0.6)", lightLabel: "#000000 60%", dark: "rgba(0,0,0,0.6)", darkLabel: "#000000 60%", description: "蒙层颜色" },
+];
+
+// ============ Section Definitions ============
+type SectionId =
+  | "color-system" | "typography" | "grid-system" | "iconography"
+  | "button" | "search-box" | "switch" | "tag" | "segmented-control" | "loading" | "stat-grid"
+  | "card-containers" | "draggable-panel"
+  | "top-toolbar" | "navigation-bar" | "bottom-actions"
+  | "toast" | "dialog" | "notification-bar" | "action-sheet" | "bubble-tip" | "push" | "empty-state";
+
+interface NavSection {
+  title: string;
+  items: { id: SectionId; label: string; sublabel: string }[];
+}
+
+const NAV_SECTIONS: NavSection[] = [
+  {
+    title: "FOUNDATIONS 基础样式",
+    items: [
+      { id: "color-system", label: "Color System", sublabel: "颜色系统" },
+      { id: "typography", label: "Typography", sublabel: "字体" },
+      { id: "grid-system", label: "Grid System", sublabel: "栅格系统" },
+      { id: "iconography", label: "Iconography", sublabel: "图标库" },
+    ],
+  },
+  {
+    title: "BASIC COMPONENTS 基础组件",
+    items: [
+      { id: "button", label: "Button", sublabel: "按钮" },
+      { id: "search-box", label: "Search Box", sublabel: "搜索框" },
+      { id: "switch", label: "Switch", sublabel: "开关" },
+      { id: "tag", label: "Tag", sublabel: "标签" },
+      { id: "segmented-control", label: "Segmented Control", sublabel: "分段控制" },
+      { id: "loading", label: "Loading", sublabel: "加载" },
+      { id: "stat-grid", label: "Stat Grid", sublabel: "数据统计" },
+    ],
+  },
+  {
+    title: "LAYOUT 布局组件",
+    items: [
+      { id: "card-containers", label: "Card Containers", sublabel: "卡片容器" },
+      { id: "draggable-panel", label: "Draggable Panel", sublabel: "三段式面板" },
+    ],
+  },
+  {
+    title: "NAVIGATION 导航组件",
+    items: [
+      { id: "top-toolbar", label: "Top Toolbar", sublabel: "顶部工具栏" },
+      { id: "navigation-bar", label: "Navigation Bar", sublabel: "底部导航栏" },
+      { id: "bottom-actions", label: "Bottom Actions", sublabel: "底部操作栏" },
+    ],
+  },
+  {
+    title: "FEEDBACK 反馈组件",
+    items: [
+      { id: "toast", label: "Toast", sublabel: "轻提示" },
+      { id: "dialog", label: "Dialog", sublabel: "对话框" },
+      { id: "notification-bar", label: "NotificationBar", sublabel: "通知栏" },
+      { id: "action-sheet", label: "ActionSheet", sublabel: "操作菜单" },
+      { id: "bubble-tip", label: "BubbleTip", sublabel: "气泡提示" },
+      { id: "push", label: "Push", sublabel: "推送通知" },
+      { id: "empty-state", label: "EmptyState", sublabel: "空状态" },
+    ],
+  },
+];
+
+// ============ Color Table Component ============
+function ColorTable({ title, data, isDark }: { title: string; data: ColorToken[]; isDark: boolean }) {
+  return (
+    <div className="w-full space-y-4">
+      <h3 className="text-[18px] font-semibold text-foreground">{title}</h3>
+      <div className="w-full overflow-x-auto rounded-xl border border-border bg-card">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-card-muted text-muted-foreground">
+            <tr>
+              <th className="px-4 py-3 font-medium whitespace-nowrap text-[12px]">Variable</th>
+              <th className="px-4 py-3 font-medium whitespace-nowrap text-[12px]">Group</th>
+              <th className="px-4 py-3 font-medium whitespace-nowrap text-[12px]">Light Value</th>
+              <th className="px-4 py-3 font-medium whitespace-nowrap text-[12px]">Dark Value</th>
+              <th className="px-4 py-3 font-medium whitespace-nowrap text-[12px]">Preview</th>
+              <th className="px-4 py-3 font-medium text-[12px]">Description</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {data.map((token) => (
+              <tr key={token.variable} className="hover:bg-card-muted/50 transition-colors">
+                <td className="px-4 py-3 font-mono text-[11px] text-muted-foreground whitespace-nowrap">{token.variable}</td>
+                <td className="px-4 py-3 font-semibold text-foreground whitespace-nowrap text-[12px]">{token.group}</td>
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-2">
+                    <div className="size-7 rounded-lg border border-border shrink-0" style={{ backgroundColor: token.light }} />
+                    <span className="text-muted-foreground text-[11px] whitespace-nowrap">{token.lightLabel}</span>
+                  </div>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-2">
+                    <div className="size-7 rounded-lg border border-border shrink-0" style={{ backgroundColor: token.dark }} />
+                    <span className="text-muted-foreground text-[11px] whitespace-nowrap">{token.darkLabel}</span>
+                  </div>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex items-center">
+                    {title.includes("Text") ? (
+                      <span className="font-medium text-[14px]" style={{ color: isDark ? token.dark : token.light }}>Aa</span>
+                    ) : (
+                      <div className="h-7 w-14 rounded-lg border border-border" style={{ backgroundColor: isDark ? token.dark : token.light }} />
+                    )}
+                  </div>
+                </td>
+                <td className="px-4 py-3 text-muted-foreground text-[12px] min-w-[200px]">{token.description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ============ Phone Frame Component ============
+function PhoneFrame({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn("relative w-[390px] h-[680px] bg-card-muted rounded-[40px] border-[3px] border-border overflow-hidden shadow-lg", className)}>
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[120px] h-[28px] bg-foreground/90 rounded-b-[14px] z-50" />
+      <div className="w-full h-full overflow-hidden relative pt-[4px]">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ============ Config Panel Component ============
+function ConfigPanel({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
+  return (
+    <div className="bg-card rounded-[16px] border border-border p-5 space-y-4">
+      <div>
+        <h3 className="text-[18px] font-semibold text-foreground">{title}</h3>
+        {subtitle && <p className="text-[12px] text-muted-foreground mt-1">{subtitle}</p>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function ConfigRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <label className="text-[13px] font-medium text-foreground">{label}</label>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+function OptionGroup({ options, value, onChange }: { options: string[]; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {options.map((opt) => (
+        <button
+          key={opt}
+          onClick={() => onChange(opt)}
+          className={cn(
+            "px-3 py-1.5 rounded-[20px] text-[12px] font-medium transition-all",
+            value === opt ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+          )}
+        >
+          {opt}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ============ Section Renderers ============
+
+function ColorSystemSection() {
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <div className={cn("flex flex-col gap-6 transition-colors", isDark && "dark")}>
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-[24px] font-semibold text-foreground">Color System</h2>
+          <p className="text-muted-foreground text-[14px] mt-1">Design system color tokens with light/dark mode mappings.</p>
+        </div>
+        <button
+          onClick={() => setIsDark(!isDark)}
+          className="flex items-center gap-2 px-4 py-2 rounded-[20px] border border-border text-[13px] font-medium hover:bg-card-muted transition-colors"
+        >
+          {isDark ? "☀️" : "🌙"} {isDark ? "Light Mode" : "Dark Mode"}
+        </button>
+      </div>
+      <ColorTable title="Text Colors / 文本" data={TEXT_COLORS} isDark={isDark} />
+      <ColorTable title="Button Colors / 按钮色彩" data={BUTTON_COLORS} isDark={isDark} />
+      <ColorTable title="Background Colors / 背景色彩" data={BG_COLORS} isDark={isDark} />
+    </div>
+  );
+}
+
+function ButtonSection() {
+  const [size, setSize] = useState<string>("large");
+  const [variant, setVariant] = useState<string>("primary");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[400px] bg-card-muted rounded-[24px] p-8">
+        <div className="space-y-6">
+          <div className="text-[11px] text-muted-foreground uppercase tracking-wider text-center mb-4">Button Preview</div>
+          <div className="flex flex-col items-center gap-4">
+            <Btn size={size as any} variant={variant as any} label="操作项" />
+            <div className="flex gap-3 flex-wrap justify-center">
+              {(["primary", "secondary", "outline", "ghost"] as const).map((v) => (
+                <Btn key={v} size={size as any} variant={v} label={v} />
+              ))}
+            </div>
+          </div>
+          <div className="border-t border-border pt-4 mt-4">
+            <div className="text-[11px] text-muted-foreground uppercase tracking-wider text-center mb-3">All Sizes</div>
+            <div className="flex flex-col items-center gap-3">
+              {(["large", "middle", "small", "xsmall"] as const).map((s) => (
+                <Btn key={s} size={s} variant={variant as any} label={`${s} (${s === 'large' ? '48px' : s === 'middle' ? '40px' : s === 'small' ? '32px' : '28px'})`} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0 space-y-4">
+        <ConfigPanel title="Button" subtitle="按钮组件">
+          <ConfigRow label="Size">
+            <OptionGroup options={["large", "middle", "small", "xsmall"]} value={size} onChange={setSize} />
+          </ConfigRow>
+          <ConfigRow label="Variant">
+            <OptionGroup options={["primary", "secondary", "outline", "ghost"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function SearchBoxSection() {
+  const [searchValue, setSearchValue] = useState("");
+  const [variant, setVariant] = useState<string>("card");
+  const [mode, setMode] = useState<string>("default");
+  const [placeholder, setPlaceholder] = useState("底纹词");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1">
+        <PhoneFrame>
+          <div className="w-full h-full bg-card-muted flex flex-col">
+            <div className="p-4 pt-[40px] space-y-4">
+              <div className="bg-[rgba(54,123,246,0.1)] rounded-[12px] p-3 text-[12px] text-accent space-y-1">
+                <p className="font-medium">Interaction Guide:</p>
+                <ul className="list-disc pl-4 space-y-0.5">
+                  <li><strong>Default:</strong> Clear input & blur.</li>
+                  <li><strong>Inputting:</strong> Click input (Focus). Button becomes Primary. Close icon appears.</li>
+                  <li><strong>Result:</strong> Type text & blur (or hit Search). Button becomes Cancel (Secondary). Mic icon returns.</li>
+                </ul>
+              </div>
+              <SearchBox
+                value={searchValue}
+                onChange={setSearchValue}
+                variant={variant as any}
+                mode={mode as any}
+                placeholder={placeholder}
+                onBack={() => setSearchValue("")}
+                onSearch={() => {}}
+                onMic={() => {}}
+                onClear={() => setSearchValue("")}
+              />
+              <div className="space-y-3 mt-6">
+                {[1,2,3,4,5].map(i => (
+                  <div key={i} className="h-[56px] bg-border/30 rounded-[12px]" />
+                ))}
+              </div>
+            </div>
+          </div>
+        </PhoneFrame>
+      </div>
+      <div className="w-[280px] shrink-0 space-y-4">
+        <ConfigPanel title="Search Box" subtitle="Context & Content">
+          <ConfigRow label="Variant / Context">
+            <OptionGroup options={["card", "map"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+          <ConfigRow label="Scenic Mode (New)">
+            <OptionGroup options={["default", "scenic", "scenic-date"]} value={mode} onChange={setMode} />
+          </ConfigRow>
+          <ConfigRow label="Placeholder Text">
+            <input
+              type="text"
+              value={placeholder}
+              onChange={(e) => setPlaceholder(e.target.value)}
+              className="w-full h-[36px] px-3 rounded-[8px] bg-input-background border-none text-[13px] outline-none focus:ring-2 focus:ring-accent"
+            />
+          </ConfigRow>
+          <ConfigRow label="Current Value">
+            <div className="flex items-center justify-between">
+              <input
+                type="text"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="w-full h-[36px] px-3 rounded-[8px] bg-input-background border-none text-[13px] outline-none"
+              />
+              <button onClick={() => setSearchValue("")} className="text-[11px] text-muted-foreground ml-2 shrink-0 hover:text-foreground">Clear</button>
+            </div>
+          </ConfigRow>
+          <div className="text-[12px] text-muted-foreground pt-2 border-t border-border">
+            <p className="font-medium mb-1">Events</p>
+            <p>Check console for interaction logs</p>
+          </div>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function SwitchSection() {
+  const [checked, setChecked] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [interactiveChecked, setInteractiveChecked] = useState(true);
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 bg-card-muted rounded-[24px] p-8 min-h-[400px]">
+        <div className="space-y-8">
+          <div>
+            <div className="text-[11px] text-muted-foreground uppercase tracking-wider mb-4">Segmented Control</div>
+            <div className="flex items-center justify-center gap-8">
+              <SegmentedControl value="静音" options={["静音", "简洁"]} onChange={() => {}} size="large" />
+            </div>
+          </div>
+          <div className="border-t border-border pt-6">
+            <div className="text-[11px] text-muted-foreground uppercase tracking-wider mb-4">Boolean Switch</div>
+            <div className="flex items-center justify-between bg-card rounded-[12px] p-4">
+              <span className="text-[14px] text-foreground">Interactive Demo</span>
+              <Switch checked={interactiveChecked} onCheckedChange={setInteractiveChecked} />
+            </div>
+            <div className="flex items-center justify-center gap-6 mt-4">
+              <div className="flex flex-col items-center gap-2">
+                <Switch checked={true} onCheckedChange={() => {}} />
+                <span className="text-[11px] text-muted-foreground">Active</span>
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <Switch checked={false} onCheckedChange={() => {}} />
+                <span className="text-[11px] text-muted-foreground">Inactive</span>
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <Switch checked={false} onCheckedChange={() => {}} disabled />
+                <span className="text-[11px] text-muted-foreground">Disabled</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0 space-y-4">
+        <ConfigPanel title="Segmented Control" subtitle="Size Variant">
+          <ConfigRow label="Size">
+            <SegmentedControlSizeDemo />
+          </ConfigRow>
+        </ConfigPanel>
+        <ConfigPanel title="Boolean Switch" subtitle="Interactive State">
+          <div className="flex items-center justify-between">
+            <span className="text-[13px] text-foreground">Disabled State</span>
+            <Switch checked={disabled} onCheckedChange={setDisabled} />
+          </div>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function SegmentedControlSizeDemo() {
+  const [size, setSize] = useState<string>("large");
+  const sizeMap: Record<string, string> = { large: "Large (48px)", middle: "Middle (40px)", small: "Small (32px)" };
+  return (
+    <OptionGroup options={["large", "middle", "small"]} value={size} onChange={setSize} />
+  );
+}
+
+function TagSection() {
+  const [variant, setVariant] = useState<string>("filled");
+  const [size, setSize] = useState<string>("lg");
+  const [showArrow, setShowArrow] = useState(false);
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[300px] bg-card-muted rounded-[24px] p-8">
+        <div className="space-y-6 text-center">
+          <Tag label="标签文字" variant={variant as any} size={size as any} showArrow={showArrow} />
+          <div className="border-t border-border pt-4 flex flex-wrap gap-2 justify-center">
+            {(["lg", "md", "sm", "xs"] as const).map((s) => (
+              <Tag key={s} label={`Size ${s}`} variant={variant as any} size={s} showArrow={showArrow} />
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="Tag" subtitle="标签组件">
+          <ConfigRow label="Variant">
+            <OptionGroup options={["filled", "outlined"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+          <ConfigRow label="Size">
+            <OptionGroup options={["lg", "md", "sm", "xs"]} value={size} onChange={setSize} />
+          </ConfigRow>
+          <ConfigRow label="Show Arrow">
+            <Switch checked={showArrow} onCheckedChange={setShowArrow} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function CardContainersSection() {
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1">
+        <div className="max-w-[390px] mx-auto space-y-4">
+          <h3 className="mb-4 text-foreground">卡片容器示例</h3>
+          <div className="bg-card border-[0.5px] border-card-border rounded-[16px] p-4 space-y-3" style={{ boxShadow: "var(--elevation-sm)" }}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="text-[16px]">📍</span>
+                <h4 className="text-foreground">当前位置</h4>
+              </div>
+              <span className="text-xs text-accent">强调卡</span>
+            </div>
+            <div className="space-y-2">
+              <div className="text-foreground text-[14px]">北京市东城区东长安街</div>
+              <div className="text-sm text-muted-foreground">天安门广场附近 · 距离您 80米</div>
+            </div>
+            <div className="grid grid-cols-3 gap-3 pt-2 border-t border-border">
+              {["导航", "分享", "收藏"].map((action) => (
+                <button key={action} className="flex flex-col items-center gap-1 py-2 hover:bg-muted/50 rounded-lg transition-colors">
+                  <span className="text-[16px]">{action === "导航" ? "🧭" : action === "分享" ? "📤" : "⭐"}</span>
+                  <span className="text-xs text-foreground">{action}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="bg-card-muted rounded-[16px] p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="text-[16px]">📍</span>
+                <h4 className="text-foreground">附近地点</h4>
+              </div>
+              <span className="text-xs text-muted-foreground">普通卡</span>
+            </div>
+            <div className="space-y-2">
+              {[
+                { name: "故宫博物院", distance: "1.2km", type: "景点" },
+                { name: "王府井大街", distance: "850m", type: "商圈" },
+                { name: "国家博物馆", distance: "450m", type: "博物馆" },
+              ].map((poi, i) => (
+                <div key={i} className="flex items-center gap-3 py-2">
+                  <span className="text-muted-foreground">📍</span>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm text-foreground truncate">{poi.name}</div>
+                    <div className="text-xs text-muted-foreground">{poi.type}</div>
+                  </div>
+                  <div className="text-xs text-muted-foreground shrink-0">{poi.distance}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="bg-card-muted rounded-[16px] p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h4 className="text-foreground">搜索历史</h4>
+              <span className="text-xs text-muted-foreground">普通卡</span>
+            </div>
+            <div className="space-y-2">
+              {[
+                { keyword: "北京南站", time: "今天 14:30" },
+                { keyword: "三里屯", time: "昨天" },
+                { keyword: "首都机场", time: "2天前" },
+              ].map((item, i) => (
+                <div key={i} className="flex items-center justify-between py-2">
+                  <div className="text-sm text-foreground">{item.keyword}</div>
+                  <div className="text-xs text-muted-foreground">{item.time}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0 space-y-4">
+        <ConfigPanel title="📝 使用规则">
+          <div className="space-y-3 text-[13px]">
+            <div className="flex items-start gap-2"><span>✅</span><div><div className="text-foreground font-medium">强调卡（白色）</div><div className="text-muted-foreground">一屏仅使用一次，用于突出最重要的模块</div></div></div>
+            <div className="flex items-start gap-2"><span>✅</span><div><div className="text-foreground font-medium">普通卡（灰色）</div><div className="text-muted-foreground">无使用限制，适用于大多数模块内容</div></div></div>
+            <div className="flex items-start gap-2"><span>❌</span><div><div className="text-foreground font-medium">禁止</div><div className="text-muted-foreground">在同一视口内使用多个强调卡</div></div></div>
+            <div className="flex items-start gap-2"><span>💡</span><div><div className="text-foreground font-medium">推荐</div><div className="text-muted-foreground">1个强调卡 + 多个普通卡的混合使用</div></div></div>
+          </div>
+        </ConfigPanel>
+        <ConfigPanel title="💻 代码示例">
+          <div className="space-y-3">
+            <div>
+              <div className="text-[11px] text-muted-foreground mb-1">强调卡（白色）</div>
+              <pre className="bg-card-muted rounded-[8px] p-3 text-[11px] text-foreground overflow-x-auto whitespace-pre-wrap">{`<div className=
+  "bg-card
+  border-[0.5px]
+  border-card-border
+  rounded-[16px]
+  p-4"
+  style={{
+    boxShadow:
+    "var(--elevation-sm)"
+  }}
+>`}</pre>
+            </div>
+            <div>
+              <div className="text-[11px] text-muted-foreground mb-1">普通卡（灰色）</div>
+              <pre className="bg-card-muted rounded-[8px] p-3 text-[11px] text-foreground overflow-x-auto whitespace-pre-wrap">{`<div className=
+  "bg-card-muted
+  rounded-[16px]
+  p-4"
+>`}</pre>
+            </div>
+          </div>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function DraggablePanelSection() {
+  const [panelState, setPanelState] = useState(DRAWER_STATES.MEDIUM);
+  const [showTopToolbar, setShowTopToolbar] = useState(true);
+  const [toolbarMode, setToolbarMode] = useState<string>("left-title");
+  const [showBottomToolbar, setShowBottomToolbar] = useState(true);
+  const [leftContent, setLeftContent] = useState<string>("search");
+  const [rightMode, setRightMode] = useState<string>("dual");
+  const stateLabels = ["Small", "Medium", "Large", "Full"];
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex justify-center">
+        <PhoneFrame>
+          <div className="w-full h-full relative bg-gradient-to-b from-[#e8e8e8] to-[#d0d0d0]">
+            {showTopToolbar && panelState !== DRAWER_STATES.FULL && (
+              <div className="absolute top-[63px] left-0 w-full z-[1000]">
+                <TopToolbar 
+                  mode={toolbarMode as any}
+                  appearance={panelState === DRAWER_STATES.LARGE ? 'gray' : 'glass'}
+                  title="地点详情"
+                />
+              </div>
+            )}
+            <DraggablePanel
+              state={panelState}
+              onStateChange={setPanelState}
+              topToolbar={showTopToolbar ? { mode: toolbarMode as any, title: "地点详情" } : undefined}
+              showTopToolbarInStates={[DRAWER_STATES.SMALL, DRAWER_STATES.MEDIUM, DRAWER_STATES.LARGE, DRAWER_STATES.FULL]}
+              bottomBar={showBottomToolbar ? (
+                <BottomActionButtons
+                  mode={rightMode as any === "single" ? "single" : "split"}
+                  leftContent={leftContent as any}
+                  mainText="开始"
+                  secondaryText="路线"
+                />
+              ) : undefined}
+              fullScreenContent={
+                <div className="p-4 space-y-3">
+                  <h3 className="text-foreground">全屏内容</h3>
+                  {[1,2,3,4,5,6].map(i => (
+                    <div key={i} className="h-[80px] bg-card-muted rounded-[12px]" />
+                  ))}
+                </div>
+              }
+              fullScreenTrigger={(onTrigger) => (
+                <div className="px-4">
+                  <Btn variant="primary" size="large" label="进入全屏模式" onClick={onTrigger} className="w-full" />
+                </div>
+              )}
+            >
+              <div className="px-4 space-y-3 pb-4">
+                {[1,2,3,4].map(i => (
+                  <div key={i} className="h-[60px] bg-border/20 rounded-[12px]" />
+                ))}
+              </div>
+            </DraggablePanel>
+          </div>
+        </PhoneFrame>
+      </div>
+      <div className="w-[280px] shrink-0 space-y-4">
+        <ConfigPanel title="Draggable Panel" subtitle="三段式面板">
+          <ConfigRow label="Panel State">
+            <OptionGroup options={stateLabels} value={stateLabels[panelState]} onChange={(v) => setPanelState(stateLabels.indexOf(v))} />
+          </ConfigRow>
+          <ConfigRow label="Show Top Toolbar">
+            <Switch checked={showTopToolbar} onCheckedChange={setShowTopToolbar} />
+          </ConfigRow>
+          <ConfigRow label="Toolbar Mode">
+            <OptionGroup options={["left-title", "center-title", "tabs"]} value={toolbarMode} onChange={setToolbarMode} />
+          </ConfigRow>
+          <ConfigRow label="Show Bottom Toolbar">
+            <Switch checked={showBottomToolbar} onCheckedChange={setShowBottomToolbar} />
+          </ConfigRow>
+          <ConfigRow label="Left Content">
+            <OptionGroup options={["search", "capsule", "capsule-more", "none"]} value={leftContent} onChange={setLeftContent} />
+          </ConfigRow>
+          <ConfigRow label="Right Action">
+            <OptionGroup options={["dual", "single"]} value={rightMode} onChange={setRightMode} />
+          </ConfigRow>
+        </ConfigPanel>
+        <div className="bg-card-muted rounded-[12px] p-4 text-[12px] text-muted-foreground space-y-1">
+          <p className="font-medium text-foreground mb-2">特性说明</p>
+          <p>· 三段式页卡：Small、Medium、Large 三种状态</p>
+          <p>· 全屏模式：Full 状态占据整个屏幕</p>
+          <p>· Top Toolbar：可选配置顶部工具栏</p>
+          <p>· Bottom Toolbar：底部操作栏，支持搜索、胶囊等多种形态</p>
+          <p>· 拖拽交互：支持向上/向下拖动切换状态</p>
+          <p>· 背景模糊：不同状态有不同的背景效果</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TopToolbarSection() {
+  const [mode, setMode] = useState<string>("left-title");
+  const [appearance, setAppearance] = useState<string>("glass");
+  const [actionCount, setActionCount] = useState(2);
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[300px] bg-card-muted rounded-[24px] p-8">
+        <div className="w-[390px] bg-gradient-to-b from-[#e0e0e0] to-[#d0d0d0] rounded-[16px] overflow-hidden p-4">
+          <TopToolbar mode={mode as any} appearance={appearance as any} title="页面主标题" rightActionCount={actionCount} />
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="Top Toolbar" subtitle="顶部工具栏">
+          <ConfigRow label="Mode">
+            <OptionGroup options={["left-title", "center-title", "tabs"]} value={mode} onChange={setMode} />
+          </ConfigRow>
+          <ConfigRow label="Appearance">
+            <OptionGroup options={["glass", "gray"]} value={appearance} onChange={setAppearance} />
+          </ConfigRow>
+          <ConfigRow label="Action Count">
+            <OptionGroup options={["0", "1", "2"]} value={String(actionCount)} onChange={(v) => setActionCount(Number(v))} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function NavigationBarSection() {
+  const [activeTab, setActiveTab] = useState<string>("home");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[300px] bg-card-muted rounded-[24px] p-8">
+        <BottomNavigationBar activeTab={activeTab as any} onTabChange={(t) => setActiveTab(t)} />
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="Navigation Bar" subtitle="底部导航栏">
+          <ConfigRow label="Active Tab">
+            <OptionGroup options={["home", "explore", "plan", "me"]} value={activeTab} onChange={setActiveTab} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function BottomActionsSection() {
+  const [mode, setMode] = useState<string>("split");
+  const [leftContent, setLeftContent] = useState<string>("none");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[300px] bg-card-muted rounded-[24px] p-8">
+        <div className="w-[390px]">
+          <BottomActionButtons mode={mode as any} leftContent={leftContent as any} mainText="开始" secondaryText="路线" />
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="Bottom Actions" subtitle="底部操作按钮">
+          <ConfigRow label="Mode">
+            <OptionGroup options={["single", "split", "weighted"]} value={mode} onChange={setMode} />
+          </ConfigRow>
+          <ConfigRow label="Left Content">
+            <OptionGroup options={["none", "search", "capsule", "capsule-more"]} value={leftContent} onChange={setLeftContent} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function ToastSection() {
+  const [showIcon, setShowIcon] = useState(true);
+  const [showClose, setShowClose] = useState(true);
+  const [variant, setVariant] = useState<string>("default");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex flex-col items-center justify-center min-h-[300px] bg-card-muted rounded-[24px] p-8 gap-4">
+        <Toast lines={["操作成功"]} showIcon={showIcon} showClose={showClose} variant={variant as any} actionText={variant === 'action' ? "查看详情" : undefined} />
+        <Toast lines={["第一行文本", "第二行文本"]} showIcon={showIcon} showClose={showClose} variant={variant as any} actionText={variant === 'action' ? "查看" : undefined} />
+        <Toast lines={["纯文本提示"]} showIcon={false} showClose={false} variant="default" />
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="Toast" subtitle="轻提示">
+          <ConfigRow label="Variant">
+            <OptionGroup options={["default", "action"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+          <ConfigRow label="Show Icon">
+            <Switch checked={showIcon} onCheckedChange={setShowIcon} />
+          </ConfigRow>
+          <ConfigRow label="Show Close">
+            <Switch checked={showClose} onCheckedChange={setShowClose} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function DialogSection() {
+  const [variant, setVariant] = useState<string>("default");
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[400px] bg-card-muted rounded-[24px] p-8 relative">
+        <Dialog
+          open={open}
+          onOpenChange={setOpen}
+          variant={variant as any}
+          demoMode={true}
+          title="标题最好是简短的"
+          description="请求授权确认文案要简短，可以居中"
+          mainActionText="主操作"
+          secondaryActionText="副操作"
+        />
+        {!open && (
+          <Btn variant="primary" label="Show Dialog" onClick={() => setOpen(true)} />
+        )}
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="Dialog" subtitle="对话框">
+          <ConfigRow label="Variant">
+            <OptionGroup options={["default", "warning", "image"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function NotificationBarSection() {
+  const [variant, setVariant] = useState<string>("info");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex flex-col items-center justify-center min-h-[300px] bg-card-muted rounded-[24px] p-8 gap-4">
+        <div className="w-[360px] space-y-3">
+          <NotificationBar variant={variant as any} message="这是一条通知消息" onClose={() => {}} />
+          <NotificationBar variant="success" message="操作成功完成" onClose={() => {}} actions={[{ label: "查看" }]} />
+          <NotificationBar variant="warning" message="请注意安全信息" onClose={() => {}} />
+          <NotificationBar variant="attention" message="有新消息需要处理" onClose={() => {}} actions={[{ label: "处理" }]} />
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="NotificationBar" subtitle="通知栏">
+          <ConfigRow label="Variant">
+            <OptionGroup options={["info", "success", "warning", "attention"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function ActionSheetSection() {
+  const [variant, setVariant] = useState<string>("default");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[400px] bg-card-muted rounded-[24px] p-8">
+        <div className="flex gap-6 flex-wrap justify-center">
+          {(["default", "edit", "title", "selectable"] as const).map((v) => (
+            <div key={v} className="flex flex-col items-center gap-2">
+              <div className="relative h-[300px] w-[170px]">
+                <ActionSheet isOpen={true} variant={v} className="!relative !static" />
+              </div>
+              <span className="text-[11px] text-muted-foreground capitalize">{v}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="ActionSheet" subtitle="操作菜单">
+          <ConfigRow label="Variant">
+            <OptionGroup options={["default", "edit", "title", "selectable"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function LoadingSection() {
+  return (
+    <div className="flex items-center justify-center min-h-[200px] bg-card-muted rounded-[24px] p-8">
+      <div className="flex flex-col items-center gap-4">
+        <Loading showClose={true} />
+        <Loading showClose={false} />
+      </div>
+    </div>
+  );
+}
+
+function StatGridSection() {
+  return (
+    <div className="flex items-center justify-center min-h-[200px] bg-card-muted rounded-[24px] p-8">
+      <div className="w-[360px]">
+        <StatGrid items={[
+          { value: "1,248", label: "今日访问", variant: "primary" },
+          { value: "356", label: "新增用户", variant: "accent" },
+          { value: "96.8%", label: "转化率", variant: "default" },
+        ]} />
+      </div>
+    </div>
+  );
+}
+
+function BubbleTipSection() {
+  const [placement, setPlacement] = useState<string>("top");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[300px] bg-card-muted rounded-[24px] p-8">
+        <div className="flex flex-col items-center gap-6">
+          <BubbleTip message="气泡提示文本" placement={placement as any} />
+          <div className="flex gap-4 flex-wrap justify-center">
+            {(["top", "bottom", "left", "right"] as const).map((p) => (
+              <BubbleTip key={p} message={p} placement={p} closable={false} showIcon={false} />
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="BubbleTip" subtitle="气泡提示">
+          <ConfigRow label="Placement">
+            <OptionGroup options={["top", "bottom", "left", "right"]} value={placement} onChange={setPlacement} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function PushSection() {
+  return (
+    <div className="flex items-center justify-center min-h-[200px] bg-card-muted rounded-[24px] p-8">
+      <div className="w-[360px] space-y-3">
+        <Push title="新消息通知" description="您有一条新的推送消息，请点击查看详情" />
+        <Push title="地图应用" description="附近有新的优惠活动" actionText="查看" />
+      </div>
+    </div>
+  );
+}
+
+function EmptyStateSection() {
+  const [variant, setVariant] = useState<string>("generic");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[400px] bg-card-muted rounded-[24px] p-8">
+        <EmptyState variant={variant as any} />
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="EmptyState" subtitle="空状态">
+          <ConfigRow label="Variant">
+            <OptionGroup options={["generic", "not-logged-in", "network-error", "no-plan", "no-comment", "location-related"]} value={variant} onChange={setVariant} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+function SegmentedControlSection() {
+  const [size, setSize] = useState<string>("large");
+  const [value, setValue] = useState("静音");
+  return (
+    <div className="flex gap-6 items-start">
+      <div className="flex-1 flex items-center justify-center min-h-[200px] bg-card-muted rounded-[24px] p-8">
+        <div className="space-y-4 flex flex-col items-center">
+          <SegmentedControl value={value} options={["静音", "简洁"]} onChange={setValue} size={size as any} />
+          <div className="flex gap-4">
+            {(["large", "middle", "small"] as const).map((s) => (
+              <SegmentedControl key={s} value="Tab1" options={["Tab1", "Tab2"]} onChange={() => {}} size={s} />
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="w-[280px] shrink-0">
+        <ConfigPanel title="Segmented Control" subtitle="分段控制器">
+          <ConfigRow label="Size">
+            <OptionGroup options={["large", "middle", "small"]} value={size} onChange={setSize} />
+          </ConfigRow>
+        </ConfigPanel>
+      </div>
+    </div>
+  );
+}
+
+// ============ Main Component ============
+export function ComponentLibrary() {
+  const [activeSection, setActiveSection] = useState<SectionId>("color-system");
+  const [isDark, setIsDark] = useState(false);
+
+  const renderContent = () => {
+    switch (activeSection) {
+      case "color-system": return <ColorSystemSection />;
+      case "typography": return <TypographyDocs />;
+      case "grid-system": return <GridSystemDocs />;
+      case "iconography": return <IconGallery />;
+      case "button": return <ButtonSection />;
+      case "search-box": return <SearchBoxSection />;
+      case "switch": return <SwitchSection />;
+      case "tag": return <TagSection />;
+      case "segmented-control": return <SegmentedControlSection />;
+      case "loading": return <LoadingSection />;
+      case "stat-grid": return <StatGridSection />;
+      case "card-containers": return <CardContainersSection />;
+      case "draggable-panel": return <DraggablePanelSection />;
+      case "top-toolbar": return <TopToolbarSection />;
+      case "navigation-bar": return <NavigationBarSection />;
+      case "bottom-actions": return <BottomActionsSection />;
+      case "toast": return <ToastSection />;
+      case "dialog": return <DialogSection />;
+      case "notification-bar": return <NotificationBarSection />;
+      case "action-sheet": return <ActionSheetSection />;
+      case "bubble-tip": return <BubbleTipSection />;
+      case "push": return <PushSection />;
+      case "empty-state": return <EmptyStateSection />;
+      default: return <div className="text-muted-foreground">Select a component</div>;
+    }
+  };
+
+  return (
+    <div className={cn("flex flex-col h-screen bg-background overflow-hidden", isDark && "dark")}>
+      {/* Header */}
+      <header className="shrink-0 border-b border-border px-8 py-5 flex items-center justify-between bg-card">
+        <div>
+          <h1 className="text-[24px] font-semibold text-foreground">Design Component Library</h1>
+          <p className="text-[13px] text-muted-foreground mt-0.5">Interactive playground for system components</p>
+        </div>
+        <button
+          onClick={() => setIsDark(!isDark)}
+          className="flex items-center gap-2 px-4 py-2 rounded-[20px] border border-border text-[13px] font-medium hover:bg-card-muted transition-colors"
+        >
+          {isDark ? "☀️" : "🌙"} Dark Mode
+        </button>
+      </header>
+
+      {/* Body */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar */}
+        <nav className="w-[200px] shrink-0 border-r border-border overflow-y-auto py-4 px-3 bg-card">
+          {NAV_SECTIONS.map((section) => (
+            <div key={section.title} className="mb-5">
+              <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider px-2 mb-2">
+                {section.title}
+              </div>
+              {section.items.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => setActiveSection(item.id)}
+                  className={cn(
+                    "w-full text-left px-3 py-2 rounded-[8px] transition-colors mb-0.5",
+                    activeSection === item.id
+                      ? "bg-primary/8 border-l-[3px] border-primary"
+                      : "hover:bg-card-muted"
+                  )}
+                >
+                  <div className={cn(
+                    "text-[13px] font-medium",
+                    activeSection === item.id ? "text-foreground" : "text-foreground/80"
+                  )}>
+                    {item.label}
+                  </div>
+                  <div className="text-[11px] text-muted-foreground">{item.sublabel}</div>
+                </button>
+              ))}
+            </div>
+          ))}
+        </nav>
+
+        {/* Main Content */}
+        <main className="flex-1 overflow-y-auto p-8">
+          {renderContent()}
+        </main>
+      </div>
+    </div>
+  );
+}