Nested Tabs

import NestedTabs from "@/components/ruixen/nested-tabs";
 
const tabItems = [
  {
    value: "dashboard",
    label: "Dashboard",
    content: "Main Dashboard Overview",
    subTabs: [
      { value: "stats", label: "Stats", content: "Detailed stats here." },
      { value: "reports", label: "Reports", content: "Reports content here." },
    ],
  },
  {
    value: "settings",
    label: "Settings",
    content: "General settings content",
    subTabs: [
      { value: "profile", label: "Profile", content: "Profile settings here." },
      { value: "account", label: "Account", content: "Account settings here." },
    ],
  },
];
 
export default function App() {
  return <NestedTabs items={tabItems} defaultValue="dashboard" />;
}

interface NestedSubTab {
  value: string;
  label: string;
  content?: React.ReactNode;
}
 
interface NestedTabItem {
  value: string;
  label: string;
  content?: React.ReactNode;
  subTabs?: NestedSubTab[];
}