<!-- @dsCard group="Components" viewport="700x260" name="Navigation" subtitle="NavItem sidebar, Tabs" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../styles.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
<script src="../../_ds_bundle.js"></script>
<style>
  body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
  #root { padding: 20px 24px; display: flex; gap: 28px; align-items: flex-start; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const NS = window.ChicoryTVDesignSystem_eb3b61;
const { NavItem, NavSection, Tabs } = NS;
const Ico = ({ n, s = 16 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current){ r.current.innerHTML=""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el);} }); return <span ref={r} style={{ display: "inline-flex" }} />; };

function Demo() {
  const [tab, setTab] = React.useState("streaming");
  return (
    <React.Fragment>
      <div style={{ width: 216, background: "var(--surface-card)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", padding: 8 }}>
        <NavItem icon={<Ico n="LayoutDashboard" />} label="Dashboard" />
        <NavItem icon={<Ico n="Tv" />} label="Channels" active />
        <NavItem icon={<Ico n="CalendarClock" />} label="Schedules" />
        <NavItem icon={<Ico n="ListVideo" />} label="Playouts" badge={3} badgeTone="warn" />
        <NavSection>Media</NavSection>
        <NavItem icon={<Ico n="Library" />} label="Libraries" />
        <NavItem icon={<Ico n="FolderTree" />} label="Collections" />
        <NavItem icon={<Ico n="Settings" />} label="Settings" />
      </div>
      <div style={{ flex: 1, maxWidth: 380 }}>
        <Tabs value={tab} onChange={setTab} tabs={[
          { value: "general", label: "General" },
          { value: "streaming", label: "Streaming" },
          { value: "items", label: "Schedule items", count: 12 },
        ]} />
      </div>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
</script>
</body>
</html>
