DropdownMenu

'use client';

import { Button, DropdownMenu, toast } from '@akhatmirzo/ui';
import { Archive, ChevronDown, Copy, Pencil, Trash2 } from 'lucide-react';

export default function DropdownMenuBasic() {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <Button variant="outline" rightIcon={<ChevronDown />}>
          Amallar
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item
          icon={<Pencil />}
          shortcut={['mod', 'E']}
          onSelect={() => toast('Tahrirlash')}
        >
          Tahrirlash
        </DropdownMenu.Item>
        <DropdownMenu.Item
          icon={<Copy />}
          shortcut={['mod', 'D']}
          onSelect={() => toast('Nusxa olindi')}
        >
          Nusxa olish
        </DropdownMenu.Item>
        <DropdownMenu.Item icon={<Archive />} onSelect={() => toast('Arxivlandi')}>
          Arxivlash
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item icon={<Trash2 />} variant="danger" onSelect={() => toast("O'chirildi")}>
          O'chirish
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

'use client';

import { DropdownMenu } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function DropdownMenuCheckboxRadio() {
  const [columns, setColumns] = useState({ price: true, stock: true, sku: false });
  const [sort, setSort] = useState('new');

  return (
    <div className="flex flex-wrap items-center gap-3">
      <DropdownMenu>
        <DropdownMenu.Trigger>Ustunlar</DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Label>Jadvalda ko'rsatish</DropdownMenu.Label>
          {(
            [
              ['price', 'Narx'],
              ['stock', 'Ombordagi soni'],
              ['sku', 'Artikul'],
            ] as const
          ).map(([key, label]) => (
            <DropdownMenu.CheckboxItem
              key={key}
              checked={columns[key]}
              onCheckedChange={(on) => setColumns((c) => ({ ...c, [key]: on }))}
              // Menyu yopilmasin — bir nechtasini ketma-ket belgilash uchun
              onSelect={(e) => e.preventDefault()}
            >
              {label}
            </DropdownMenu.CheckboxItem>
          ))}
        </DropdownMenu.Content>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownMenu.Trigger>Saralash</DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Label>Tartib</DropdownMenu.Label>
          <DropdownMenu.RadioGroup value={sort} onValueChange={setSort}>
            <DropdownMenu.RadioItem value="new">Avval yangilari</DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="cheap">Avval arzonlari</DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="expensive">Avval qimmatlari</DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="popular" disabled>
              Ommabop (tez orada)
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
        </DropdownMenu.Content>
      </DropdownMenu>
      <span className="text-sm text-text-muted">Saralash: {sort}</span>
    </div>
  );
}

'use client';

import { DropdownMenu, IconButton } from '@akhatmirzo/ui';
import { Archive, Ellipsis, Pencil, Share2, Trash2 } from 'lucide-react';

export default function DropdownMenuSubmenu() {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <IconButton variant="outline" aria-label="Ko'proq amallar">
          <Ellipsis />
        </IconButton>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item icon={<Pencil />}>Nomini o'zgartirish</DropdownMenu.Item>
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger icon={<Share2 />}>Ulashish</DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item>Telegram</DropdownMenu.Item>
            <DropdownMenu.Item>Email orqali</DropdownMenu.Item>
            <DropdownMenu.Item shortcut={['mod', 'L']}>Havolani nusxalash</DropdownMenu.Item>
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger icon={<Archive />}>Ko'chirish</DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item>Kiruvchi</DropdownMenu.Item>
            <DropdownMenu.Item>Arxiv</DropdownMenu.Item>
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Separator />
        <DropdownMenu.Item icon={<Trash2 />} variant="danger">
          O'chirish
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

'use client';

import { Button, DropdownMenu } from '@akhatmirzo/ui';
import { LogOut, Send, Settings, User } from 'lucide-react';

export default function DropdownMenuProfile() {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <Button variant="ghost" leftIcon={<User />}>
          Akmal Karimov
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content align="end" className="w-56">
        <DropdownMenu.Label>akmal@misol.uz</DropdownMenu.Label>
        <DropdownMenu.Group>
          <DropdownMenu.Item icon={<User />} shortcut={['mod', 'P']}>
            Profil
          </DropdownMenu.Item>
          <DropdownMenu.Item icon={<Settings />} shortcut={['mod', ',']}>
            Sozlamalar
          </DropdownMenu.Item>
          <DropdownMenu.Item asChild icon={<Send />}>
            <a href="https://github.com/Akhatmirzo/akhatmirzo-toolkit">Loyiha GitHub'da</a>
          </DropdownMenu.Item>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Item icon={<LogOut />} variant="danger">
          Chiqish
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

'use client';

import { Button, DropdownMenu } from '@akhatmirzo/ui';
import { Copy, Pencil, Trash2 } from 'lucide-react';
import { useState } from 'react';

export default function DropdownMenuStates() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex flex-wrap items-center gap-3">
      <DropdownMenu>
        <DropdownMenu.Trigger>O'chirilgan elementlar</DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Item icon={<Pencil />}>Tahrirlash</DropdownMenu.Item>
          <DropdownMenu.Item icon={<Copy />} disabled>
            Nusxa olish (ruxsat yo'q)
          </DropdownMenu.Item>
          <DropdownMenu.Item icon={<Trash2 />} variant="danger" disabled>
            O'chirish (ruxsat yo'q)
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>

      <DropdownMenu open={open} onOpenChange={setOpen}>
        <DropdownMenu.Trigger>Boshqariladigan</DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Item>Birinchi</DropdownMenu.Item>
          <DropdownMenu.Item>Ikkinchi</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
      <Button variant="ghost" onClick={() => setOpen(true)}>
        Tashqaridan ochish
      </Button>
    </div>
  );
}