ContextMenu

'use client';

import { ContextMenu, toast } from '@akhatmirzo/ui';
import { Copy, Download, FileText, Pencil, Trash2 } from 'lucide-react';

export default function ContextMenuBasic() {
  return (
    <ContextMenu>
      <ContextMenu.Trigger asChild>
        <div className="flex w-72 items-center gap-3 rounded-xl border border-dashed border-border-strong bg-surface p-4 select-none">
          <span className="grid size-10 place-items-center rounded-lg bg-primary-soft text-primary-soft-foreground">
            <FileText className="size-5" aria-hidden="true" />
          </span>
          <span className="flex flex-col">
            <span className="text-sm font-medium">Hisobot-2026.pdf</span>
            <span className="text-xs text-text-muted">O'ng tugma bilan bosing</span>
          </span>
        </div>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item
          icon={<Pencil />}
          shortcut={['mod', 'E']}
          onSelect={() => toast('Tahrirlash')}
        >
          Tahrirlash
        </ContextMenu.Item>
        <ContextMenu.Item
          icon={<Copy />}
          shortcut={['mod', 'D']}
          onSelect={() => toast('Nusxa olindi')}
        >
          Nusxa olish
        </ContextMenu.Item>
        <ContextMenu.Item icon={<Download />} onSelect={() => toast('Yuklanmoqda')}>
          Yuklab olish
        </ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item icon={<Trash2 />} variant="danger" onSelect={() => toast("O'chirildi")}>
          O'chirish
        </ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu>
  );
}

'use client';

import { ContextMenu, cn } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function ContextMenuCheckboxRadio() {
  const [grid, setGrid] = useState(true);
  const [rulers, setRulers] = useState(false);
  const [zoom, setZoom] = useState('100');

  return (
    <ContextMenu>
      <ContextMenu.Trigger asChild>
        <div
          className={cn(
            'grid h-48 w-full max-w-md place-items-center rounded-xl border border-border bg-surface text-sm text-text-muted select-none',
            grid && 'border-dashed',
            rulers && 'border-l-4 border-t-4',
          )}
        >
          Kanvas · {zoom}% — o'ng tugma bilan bosing
        </div>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Label>Ko'rinish</ContextMenu.Label>
        <ContextMenu.CheckboxItem checked={grid} onCheckedChange={setGrid}>
          Panjara
        </ContextMenu.CheckboxItem>
        <ContextMenu.CheckboxItem checked={rulers} onCheckedChange={setRulers}>
          Chizg'ichlar
        </ContextMenu.CheckboxItem>
        <ContextMenu.Separator />
        <ContextMenu.Label>Masshtab</ContextMenu.Label>
        <ContextMenu.RadioGroup value={zoom} onValueChange={setZoom}>
          <ContextMenu.RadioItem value="50">50%</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="100">100%</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="200">200%</ContextMenu.RadioItem>
        </ContextMenu.RadioGroup>
      </ContextMenu.Content>
    </ContextMenu>
  );
}

'use client';

import { ContextMenu, DropdownMenu, IconButton, toast } from '@akhatmirzo/ui';
import { Ellipsis, Pencil, Send, Trash2 } from 'lucide-react';

const orders = [
  { id: '#1042', customer: 'Dilnoza Karimova', total: "1 250 000 so'm" },
  { id: '#1043', customer: 'Javohir Toshmatov', total: "480 000 so'm" },
];

/** ContextMenu va DropdownMenu qismlari bir xil — amallar bir marta yoziladi */
function Actions({ id, Menu }: { id: string; Menu: typeof ContextMenu | typeof DropdownMenu }) {
  return (
    <>
      <Menu.Item icon={<Pencil />} onSelect={() => toast(`${id} tahrirlanmoqda`)}>
        Tahrirlash
      </Menu.Item>
      <Menu.Sub>
        <Menu.SubTrigger icon={<Send />}>Yuborish</Menu.SubTrigger>
        <Menu.SubContent>
          <Menu.Item onSelect={() => toast('Telegram')}>Telegram</Menu.Item>
          <Menu.Item onSelect={() => toast('Email')}>Email</Menu.Item>
        </Menu.SubContent>
      </Menu.Sub>
      <Menu.Separator />
      <Menu.Item icon={<Trash2 />} variant="danger" onSelect={() => toast(`${id} o'chirildi`)}>
        O'chirish
      </Menu.Item>
    </>
  );
}

export default function ContextMenuTableRow() {
  return (
    <ul className="m-0 w-full max-w-lg list-none rounded-xl border border-border bg-surface p-0">
      {orders.map((o) => (
        <ContextMenu key={o.id}>
          <ContextMenu.Trigger asChild>
            <li className="flex items-center gap-3 border-b border-border px-4 py-2 text-sm last:border-b-0">
              <span className="font-medium">{o.id}</span>
              <span className="truncate text-text-muted">{o.customer}</span>
              <span className="ml-auto tabular-nums">{o.total}</span>
              {/* Xuddi shu amallar tugma orqali ham mavjud */}
              <DropdownMenu>
                <DropdownMenu.Trigger asChild>
                  <IconButton size="sm" variant="ghost" aria-label={`${o.id} amallari`}>
                    <Ellipsis />
                  </IconButton>
                </DropdownMenu.Trigger>
                <DropdownMenu.Content align="end">
                  <Actions id={o.id} Menu={DropdownMenu} />
                </DropdownMenu.Content>
              </DropdownMenu>
            </li>
          </ContextMenu.Trigger>
          <ContextMenu.Content>
            <Actions id={o.id} Menu={ContextMenu} />
          </ContextMenu.Content>
        </ContextMenu>
      ))}
    </ul>
  );
}