CommandPalette

'use client';

import { Button, CommandPalette, Kbd, toast, type CommandPaletteGroup } from '@akhatmirzo/ui';
import {
  ChartColumn,
  FileSpreadsheet,
  House,
  Package,
  Plus,
  Search,
  Settings,
  UserPlus,
  Users,
} from 'lucide-react';

const run = (label: string) => () => toast(`"${label}" bajarildi`);

const groups: CommandPaletteGroup[] = [
  {
    heading: 'Sahifalar',
    items: [
      { label: 'Bosh sahifa', icon: <House />, onSelect: run('Bosh sahifa') },
      {
        label: 'Buyurtmalar',
        icon: <Package />,
        keywords: ['zakaz', 'savdo'],
        onSelect: run('Buyurtmalar'),
      },
      { label: 'Mijozlar', icon: <Users />, onSelect: run('Mijozlar') },
      {
        label: 'Hisobotlar',
        icon: <ChartColumn />,
        keywords: ['statistika'],
        onSelect: run('Hisobotlar'),
      },
      {
        label: 'Sozlamalar',
        icon: <Settings />,
        shortcut: ['mod', ','],
        onSelect: run('Sozlamalar'),
      },
    ],
  },
  {
    heading: 'Amallar',
    items: [
      {
        label: 'Yangi buyurtma',
        icon: <Plus />,
        shortcut: ['mod', 'N'],
        onSelect: run('Yangi buyurtma'),
      },
      { label: "Mijoz qo'shish", icon: <UserPlus />, onSelect: run("Mijoz qo'shish") },
      {
        label: 'Eksport (Excel)',
        icon: <FileSpreadsheet />,
        keywords: ['xlsx'],
        onSelect: run('Eksport'),
      },
    ],
  },
];

export default function CommandPaletteBasic() {
  return (
    // Docs saytida Ctrl+K qidiruvga band, shuning uchun bu yerda mod+J
    <CommandPalette groups={groups} hotkey="mod+j">
      <Button variant="outline" leftIcon={<Search />} className="min-w-64 justify-start">
        <span className="flex-1 text-left text-text-muted">Qidirish...</span>
        <Kbd keys={['mod', 'J']} />
      </Button>
    </CommandPalette>
  );
}

'use client';

import { Button, CommandPalette, toast, type CommandPaletteGroup } from '@akhatmirzo/ui';
import { Globe, Moon, Sun, User } from 'lucide-react';

const customers = ['Aziza Karimova', 'Bobur Toshmatov', "G'ayrat Usmonov", 'Malika Yusupova'];

const groups: CommandPaletteGroup[] = [
  {
    heading: 'Sozlamalar',
    items: [
      {
        label: 'Mavzuni almashtirish',
        icon: <Moon />,
        keywords: ['tungi rejim', 'dark'],
        page: {
          title: 'Mavzu',
          placeholder: 'Mavzu tanlang...',
          groups: [
            {
              heading: 'Mavzu',
              items: [
                {
                  id: 'theme-light',
                  label: "Yorug'",
                  icon: <Sun />,
                  onSelect: () => toast("Yorug' mavzu"),
                },
                {
                  id: 'theme-dark',
                  label: "Qorong'i",
                  icon: <Moon />,
                  onSelect: () => toast("Qorong'i mavzu"),
                },
              ],
            },
          ],
        },
      },
      {
        label: 'Tilni almashtirish',
        icon: <Globe />,
        page: {
          title: 'Til',
          groups: [
            {
              heading: 'Til',
              items: [
                { id: 'lang-uz', label: "O'zbekcha", onSelect: () => toast("O'zbekcha") },
                { id: 'lang-en', label: 'English', disabled: true },
              ],
            },
          ],
        },
      },
    ],
  },
  {
    heading: 'Mijozlar',
    searchOnly: true,
    items: customers.map((name) => ({ label: name, icon: <User />, onSelect: () => toast(name) })),
  },
];

export default function CommandPalettePages() {
  return (
    <CommandPalette groups={groups} hotkey={false} recent={false}>
      <Button variant="soft">Sozlamalarni ochish</Button>
    </CommandPalette>
  );
}

'use client';

import { Button, CommandPalette, toast, type CommandPaletteItem } from '@akhatmirzo/ui';
import { Plus, User } from 'lucide-react';

const customers = [
  ['Akmal Ergashev', '+998 90 123 45 67'],
  ['Akbar Sobirov', '+998 93 555 12 34'],
  ['Kamola Akramova', '+998 97 700 00 11'],
  ['Nodira Ahmedova', '+998 91 444 22 33'],
] as const;

/** Server qidiruvini taqlid qiladi (700ms); yangi so'rov eskisini bekor qiladi */
function searchCustomers(query: string, { signal }: { signal: AbortSignal }) {
  return new Promise<CommandPaletteItem[]>((resolve, reject) => {
    const timer = setTimeout(() => {
      const q = query.toLowerCase();
      resolve(
        customers
          .filter(([name]) => name.toLowerCase().includes(q))
          .map(([name, phone]) => ({
            id: `customer-${name}`,
            label: name,
            description: phone,
            icon: <User />,
            onSelect: () => toast(name),
          })),
      );
    }, 700);
    signal.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new DOMException('Bekor qilindi', 'AbortError'));
    });
  });
}

export default function CommandPaletteServer() {
  return (
    <CommandPalette
      hotkey={false}
      recentKey="docs:command-palette:server"
      placeholder="Mijoz yoki buyruq qidirish..."
      onSearch={searchCustomers}
      labels={{ results: 'Mijozlar (serverdan)' }}
      groups={[
        {
          heading: 'Amallar',
          items: [
            { label: "Mijoz qo'shish", icon: <Plus />, onSelect: () => toast("Mijoz qo'shish") },
          ],
        },
      ]}
    >
      <Button variant="outline">Mijoz qidirish</Button>
    </CommandPalette>
  );
}