دستور (Command)

1import {
2  Command,
3  CommandEmpty,
4  CommandGroup,
5  CommandInput,
6  CommandItem,
7  CommandList,
8  CommandSeparator,
9} from "@/components/ui/command";
10
11export default function BasicExample() {
12  return (
13    <Command className="max-w-sm rounded-lg border">
14      <CommandInput placeholder="جستجو یا تایپ دستور..." />
15      <CommandList>
16        <CommandEmpty>نتیجه‌ای یافت نشد.</CommandEmpty>
17        <CommandGroup heading="پیشنهادات">
18          <CommandItem>تقویم</CommandItem>
19          <CommandItem>جستجوی ایموجی</CommandItem>
20          <CommandItem>ماشین‌حساب</CommandItem>
21        </CommandGroup>
22        <CommandSeparator />
23        <CommandGroup heading="تنظیمات">
24          <CommandItem>پروفایل</CommandItem>
25          <CommandItem>صورتحساب</CommandItem>
26          <CommandItem>تنظیمات</CommandItem>
27        </CommandGroup>
28      </CommandList>
29    </Command>
30  );
31}
32

1"use client";
2
3import { useState, useEffect } from "react";
4import {
5  Command,
6  CommandDialog,
7  CommandEmpty,
8  CommandGroup,
9  CommandInput,
10  CommandItem,
11  CommandList,
12  CommandSeparator,
13  CommandShortcut,
14  Button,
15} from "@/components/ui/command";
16
17export default function DialogExample() {
18  const [open, setOpen] = useState(false);
19
20  useEffect(() => {
21    const down = (e: KeyboardEvent) => {
22      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
23        e.preventDefault();
24        setOpen((o) => !o);
25      }
26    };
27    document.addEventListener("keydown", down);
28    return () => document.removeEventListener("keydown", down);
29  }, []);
30
31  return (
32    <>
33      <Button variant="outline" onClick={() => setOpen(true)}>
34        باز کردن منو (⌘K)
35      </Button>
36      <CommandDialog open={open} onOpenChange={setOpen}>
37        <CommandInput placeholder="جستجو برای دستور..." />
38        <CommandList>
39          <CommandEmpty>نتیجه‌ای یافت نشد.</CommandEmpty>
40          <CommandGroup heading="پیشنهادات">
41            <CommandItem>
42              تقویم
43              <CommandShortcut>⌘P</CommandShortcut>
44            </CommandItem>
45            <CommandItem>
46              صورتحساب
47              <CommandShortcut>⌘B</CommandShortcut>
48            </CommandItem>
49            <CommandItem>
50              تنظیمات
51              <CommandShortcut>⌘S</CommandShortcut>
52            </CommandItem>
53          </CommandGroup>
54          <CommandSeparator />
55          <CommandGroup heading="تنظیمات">
56            <CommandItem>پروفایل</CommandItem>
57            <CommandItem>صورتحساب</CommandItem>
58            <CommandItem>تنظیمات</CommandItem>
59          </CommandGroup>
60        </CommandList>
61      </CommandDialog>
62    </>
63  );
64}
65