Drawer

'use client';

import { Button, Checkbox, Drawer, Field, Input, Switch } from '@akhatmirzo/ui';
import { SlidersHorizontal } from 'lucide-react';
import { useState } from 'react';

const categories = ['Elektronika', 'Kiyim-kechak', "Uy-ro'zg'or", 'Kitoblar'];

export default function DrawerFilters() {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<string[]>(['Elektronika']);

  const toggle = (name: string, on: boolean) =>
    setSelected((prev) => (on ? [...prev, name] : prev.filter((x) => x !== name)));

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <Drawer.Trigger asChild>
        <Button variant="outline" leftIcon={<SlidersHorizontal />}>
          Filtrlar
        </Button>
      </Drawer.Trigger>
      <Drawer.Content title="Filtrlar" description="Natijalarni toraytiring.">
        <div className="flex flex-col gap-5">
          <div className="grid grid-cols-2 gap-3">
            <Field label="Narxdan">
              <Input inputMode="numeric" placeholder="0" suffix="so'm" />
            </Field>
            <Field label="Narxgacha">
              <Input inputMode="numeric" placeholder="1 000 000" suffix="so'm" />
            </Field>
          </div>
          <div className="flex flex-col gap-3">
            {categories.map((c) => (
              <Checkbox
                key={c}
                label={c}
                checked={selected.includes(c)}
                onCheckedChange={(on) => toggle(c, on)}
              />
            ))}
          </div>
          <Switch label="Faqat mavjudlari" defaultChecked />
        </div>
        <Drawer.Footer>
          <Button onClick={() => setSelected([])}>Tozalash</Button>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Qo'llash
          </Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer>
  );
}

'use client';

import { Button, Drawer, type DrawerSide } from '@akhatmirzo/ui';

const sides: { side: DrawerSide; label: string }[] = [
  { side: 'right', label: "O'ngdan" },
  { side: 'left', label: 'Chapdan' },
  { side: 'bottom', label: 'Pastdan' },
  { side: 'top', label: 'Tepadan' },
];

export default function DrawerSides() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sides.map(({ side, label }) => (
        <Drawer key={side}>
          <Drawer.Trigger asChild>
            <Button variant="outline">{label}</Button>
          </Drawer.Trigger>
          <Drawer.Content side={side} title={label} description={`side="${side}"`}>
            <p className="m-0 text-sm text-text-muted">
              Panel ekran chetidan siljib chiqadi. Pastdan chiqqanda tepada tutqich chizig'i bor.
            </p>
            <Drawer.Footer>
              <Drawer.Close asChild>
                <Button variant="primary">Yopish</Button>
              </Drawer.Close>
            </Drawer.Footer>
          </Drawer.Content>
        </Drawer>
      ))}
    </div>
  );
}

'use client';

import { Button, Drawer, type DrawerSize } from '@akhatmirzo/ui';

const sizes: { size: DrawerSize; px: string }[] = [
  { size: 'sm', px: '320px' },
  { size: 'md', px: '420px' },
  { size: 'lg', px: '560px' },
];

export default function DrawerSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sizes.map(({ size, px }) => (
        <Drawer key={size}>
          <Drawer.Trigger asChild>
            <Button variant="outline">
              {size} — {px}
            </Button>
          </Drawer.Trigger>
          <Drawer.Content size={size} title={`O'lcham: ${size}`} description={`Kenglik ${px}`}>
            <p className="m-0 text-sm text-text-muted">
              Chap va o'ngda o'lcham kenglikni, past va tepada balandlikni belgilaydi.
            </p>
          </Drawer.Content>
        </Drawer>
      ))}
    </div>
  );
}

'use client';

import { Button, Drawer } from '@akhatmirzo/ui';
import { Menu } from 'lucide-react';
import { useState } from 'react';

const items = ['Bosh sahifa', 'Buyurtmalar', 'Mahsulotlar', 'Mijozlar', 'Hisobotlar'];

export default function DrawerMobileMenu() {
  const [active, setActive] = useState('Buyurtmalar');

  return (
    <Drawer>
      <Drawer.Trigger asChild>
        <Button variant="ghost" leftIcon={<Menu />}>
          Menyu
        </Button>
      </Drawer.Trigger>
      <Drawer.Content
        side="left"
        size="sm"
        title="Menyu"
        hideTitle
        labels={{ close: 'Menyuni yopish' }}
      >
        <nav aria-label="Asosiy menyu" className="-mx-2 flex flex-col gap-1">
          {items.map((item) => (
            <Drawer.Close asChild key={item}>
              <button
                type="button"
                aria-current={item === active ? 'page' : undefined}
                onClick={() => setActive(item)}
                className="focus-ring flex h-10 cursor-pointer items-center rounded-lg border-0 bg-transparent px-3 text-left text-sm font-medium text-text hover:bg-surface-muted aria-[current=page]:bg-primary-soft aria-[current=page]:text-primary-soft-foreground"
              >
                {item}
              </button>
            </Drawer.Close>
          ))}
        </nav>
      </Drawer.Content>
    </Drawer>
  );
}

'use client';

import { Button, Drawer } from '@akhatmirzo/ui';

const rows = [
  ['Mijoz', 'Sarvar Abduxoliqov'],
  ['Telefon', '+998 90 123 45 67'],
  ['Manzil', 'Toshkent, Chilonzor tumani, 9-mavze'],
  ["To'lov", 'Naqd, yetkazib berilganda'],
  ['Jami', "1 250 000 so'm"],
];

export default function DrawerDetails() {
  return (
    <Drawer>
      <Drawer.Trigger asChild>
        <Button>Buyurtma #1042</Button>
      </Drawer.Trigger>
      <Drawer.Content size="lg" title="Buyurtma #1042" description="21-oktabr, 14:32">
        <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 text-sm">
          {rows.map(([label, value]) => (
            <div key={label} className="contents">
              <dt className="text-text-muted">{label}</dt>
              <dd className="m-0 font-medium text-text">{value}</dd>
            </div>
          ))}
        </dl>
        <Drawer.Footer>
          <Drawer.Close asChild>
            <Button>Yopish</Button>
          </Drawer.Close>
          <Button variant="primary">Yetkazildi deb belgilash</Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer>
  );
}