Command Menu with Keyboard Shortcuts

1'use client';
2 
3import {
4  IconArrowRight,
5  IconAt,
6  IconCopy,
7  IconDeviceDesktop,
8  IconDownload,
9  IconFile,
10  IconFileSearch,
11  IconKeyboard,
12  IconLink,
13  IconLogout,
14  IconMessage,
15  IconPencil,
16  IconPlus,
17  IconSend,
18  IconSettings,
19  IconTemplate,
20  IconUser,
21  IconUsers,
22} from '@tabler/icons-react';
23import { useEffect, useState } from 'react';
24import { Button } from '@/components/ui/button';
25import {
26  Command,
27  CommandEmpty,
28  CommandGroup,
29  CommandInput,
30  CommandItem,
31  CommandList,
32} from '@/components/ui/command';
33import {
34  Dialog,
35  DialogContent,
36  DialogDescription,
37  DialogHeader,
38  DialogTitle,
39} from '@/components/ui/dialog';
40import { Kbd, KbdGroup } from '@/components/ui/kbd';
41 
42export function CommandMenu02() {
43  const [open, setOpen] = useState(true);
44  const [inputValue, setInputValue] = useState('');
45 
46  useEffect(() => {
47    const down = (e: KeyboardEvent) => {
48      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
49        e.preventDefault();
50        setOpen((prev) => !prev);
51      }
52    };
53 
54    document.addEventListener('keydown', down);
55    return () => document.removeEventListener('keydown', down);
56  }, []);
57 
58  return (
59    <>
60      <Button onClick={() => setOpen(true)} variant="outline">
61        Open Command Menu
62      </Button>
63 
64      <Dialog onOpenChange={setOpen} open={open}>
65        <DialogHeader className="sr-only">
66          <DialogTitle>Command Menu</DialogTitle>
67          <DialogDescription>
68            Use the command menu to navigate through the app.
69          </DialogDescription>
70        </DialogHeader>
71        <DialogContent
72          className="gap-0 overflow-hidden rounded-xl border-border/50 p-0 shadow-lg sm:max-w-lg"
73          showCloseButton={false}
74        >
75          <Command className="flex h-full w-full flex-col overflow-hidden bg-popover **:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:grow **:data-[slot=command-input-wrapper]:border-0 **:data-[slot=command-input-wrapper]:px-0">
76            <div className="flex h-12 items-center gap-2 border-border/50 border-b px-4">
77              <CommandInput
78                className="h-10 text-[15px]"
79                onValueChange={setInputValue}
80                placeholder="What do you need?"
81                value={inputValue}
82              />
83              <button
84                className="flex shrink-0 items-center"
85                onClick={() => setOpen(false)}
86                type="button"
87              >
88// … truncated