AppShell

'use client';

import { AppShell, Sidebar } from '@akhatmirzo/ui';
import { BarChart3, Box, Home, Settings, Store, Users } from 'lucide-react';
import { useState } from 'react';

const items = [
  { id: 'home', label: 'Bosh sahifa', icon: <Home /> },
  { id: 'orders', label: 'Buyurtmalar', icon: <Box />, badge: 12 },
  { id: 'customers', label: 'Mijozlar', icon: <Users /> },
  { id: 'reports', label: 'Hisobotlar', icon: <BarChart3 /> },
];

export default function AppShellBasic() {
  const [page, setPage] = useState('home');
  const current = items.find((i) => i.id === page)?.label ?? 'Sozlamalar';

  return (
    // Hujjat ichida cheklangan ramka; haqiqiy ilovada AppShell butun ekranni egallaydi
    <div className="h-[480px] w-full overflow-auto rounded-xl border border-border">
      <AppShell className="[--ak-app-shell-height:480px]" sidebarStorageKey="docs-app-shell">
        <Sidebar>
          <Sidebar.Header>
            <span className="grid size-9 shrink-0 place-items-center rounded-xl bg-primary text-primary-foreground">
              <Store className="size-5" aria-hidden="true" />
            </span>
            <span className="truncate text-sm font-bold">Chorsu Market</span>
          </Sidebar.Header>
          <Sidebar.Content>
            <Sidebar.Group label="Do'kon">
              {items.map((item) => (
                <Sidebar.Item
                  key={item.id}
                  icon={item.icon}
                  badge={item.badge}
                  active={page === item.id}
                  onClick={() => setPage(item.id)}
                >
                  {item.label}
                </Sidebar.Item>
              ))}
            </Sidebar.Group>
            <Sidebar.Group label="Boshqaruv">
              <Sidebar.Item
                icon={<Settings />}
                active={page === 'settings'}
                onClick={() => setPage('settings')}
              >
                Sozlamalar
              </Sidebar.Item>
            </Sidebar.Group>
          </Sidebar.Content>
        </Sidebar>
        <AppShell.Main>
          <AppShell.Header>
            <AppShell.SidebarToggle />
            <span className="text-sm font-medium">{current}</span>
          </AppShell.Header>
          <div className="flex flex-col gap-3 p-6">
            <h2 className="m-0 text-xl font-semibold">{current}</h2>
            <p className="m-0 text-sm text-text-muted">
              Tugma yoki Ctrl/⌘ + B sidebar'ni yig'adi. Holat localStorage'da saqlanadi.
            </p>
          </div>
        </AppShell.Main>
      </AppShell>
    </div>
  );
}

'use client';

import { AppShell, Avatar, Sidebar } from '@akhatmirzo/ui';
import { FileText, Home, PieChart, Store, TrendingUp, Wallet } from 'lucide-react';

export default function AppShellCollapsed() {
  return (
    <div className="h-[480px] w-full overflow-auto rounded-xl border border-border">
      <AppShell
        className="[--ak-app-shell-height:480px]"
        defaultSidebarOpen={false}
        shortcut={false}
      >
        <Sidebar>
          <Sidebar.Header>
            <span className="grid size-9 shrink-0 place-items-center rounded-xl bg-primary text-primary-foreground">
              <Store className="size-5" aria-hidden="true" />
            </span>
            <span className="truncate text-sm font-bold">Chorsu Market</span>
          </Sidebar.Header>
          <Sidebar.Content>
            <Sidebar.Group>
              <Sidebar.Item icon={<Home />} href="#home" active>
                Bosh sahifa
              </Sidebar.Item>
              <Sidebar.Item icon={<Wallet />} href="#payments" badge={3}>
                To'lovlar
              </Sidebar.Item>
            </Sidebar.Group>
            <Sidebar.Group label="Hisobotlar" collapsible>
              <Sidebar.Item icon={<TrendingUp />} href="#sales">
                Savdo
              </Sidebar.Item>
              <Sidebar.Item icon={<PieChart />} href="#categories">
                Toifalar
              </Sidebar.Item>
              <Sidebar.Item icon={<FileText />} href="#tax" disabled>
                Soliq (tez orada)
              </Sidebar.Item>
            </Sidebar.Group>
          </Sidebar.Content>
          <Sidebar.Footer>
            <div className="flex min-w-0 items-center gap-3">
              <Avatar name="Dilnoza Karimova" size="sm" />
              <span className="truncate text-sm font-medium">Dilnoza Karimova</span>
            </div>
          </Sidebar.Footer>
        </Sidebar>
        <AppShell.Main>
          <AppShell.Header>
            <AppShell.SidebarToggle />
            <span className="text-sm font-medium">Bosh sahifa</span>
          </AppShell.Header>
          <p className="m-0 p-6 text-sm text-text-muted">
            Yig'ilgan holatda faqat ikonkalar ko'rinadi — ustiga kelsangiz Tooltip chiqadi.
            "Hisobotlar" guruhi to'liq holatda yig'iladi.
          </p>
        </AppShell.Main>
      </AppShell>
    </div>
  );
}

'use client';

import { AppShell, Button, Sidebar, useAppShell } from '@akhatmirzo/ui';
import { Home, Inbox } from 'lucide-react';

function Status() {
  const { sidebarOpen, setSidebarOpen, collapsed } = useAppShell();
  return (
    <div className="flex flex-col items-start gap-3 p-6 text-sm">
      <p className="m-0 text-text-muted">
        Holat: <b className="text-text">{collapsed ? "yig'ilgan" : "to'liq"}</b>
      </p>
      <Button size="sm" onClick={() => setSidebarOpen(!sidebarOpen)}>
        {collapsed ? 'Yoyish' : "Yig'ish"}
      </Button>
    </div>
  );
}

export default function AppShellUseAppShell() {
  return (
    <div className="h-[360px] w-full overflow-auto rounded-xl border border-border">
      <AppShell className="[--ak-app-shell-height:360px]" shortcut={false}>
        <Sidebar width={220}>
          <Sidebar.Content>
            <Sidebar.Group label="Pochta">
              <Sidebar.Item icon={<Inbox />} href="#inbox" badge={4} active>
                Kiruvchi
              </Sidebar.Item>
              <Sidebar.Item icon={<Home />} href="#home">
                Bosh sahifa
              </Sidebar.Item>
            </Sidebar.Group>
          </Sidebar.Content>
        </Sidebar>
        <AppShell.Main>
          <AppShell.Header>
            <AppShell.SidebarToggle />
          </AppShell.Header>
          <Status />
        </AppShell.Main>
      </AppShell>
    </div>
  );
}