Tabnav

import { TabNav } from "fromsrc/client"

const tabs = [
  { id: "guide", label: "guide", href: "/docs/guide" },
  { id: "api", label: "api", href: "/docs/api" },
  { id: "examples", label: "examples", href: "/docs/examples" },
]

<TabNav tabs={tabs} />

import { Book, Code, Layers } from "lucide-react"

const tabs = [
  { id: "guide", label: "guide", href: "/docs/guide", icon: <Book size={16} /> },
  { id: "api", label: "api", href: "/docs/api", icon: <Code size={16} /> },
  { id: "examples", label: "examples", href: "/docs/examples", icon: <Layers size={16} /> },
]

<TabNav tabs={tabs} />

const tabs = [
  {
    id: "docs",
    label: "docs",
    href: "/docs",
    match: ["/docs/guide", "/docs/intro"],
  },
  {
    id: "api",
    label: "api",
    href: "/api",
    match: ["/api/hooks", "/api/components"],
  },
];

<TabNavDropdown tabs={tabs} />

import { Sidebar, TabNav } from "fromsrc/client";

function Layout({ children }) {
  return (
    <Sidebar header={<TabNav tabs={tabs} />} items={items}>
      {children}
    </Sidebar>
  );
}