"use client"; import { useKeyboardShortcut } from "@/lib/hooks/useKeyboardShortcut"; import { CalendarIcon, EnvelopeClosedIcon, FaceIcon, GearIcon, PersonIcon, RocketIcon, } from "@radix-ui/react-icons"; import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/ui/command"; import { atom, useAtom } from "jotai"; export const commandDialogAtom = atom(false); export default function CommandDialogComponent() { const [open, setOpen] = useAtom(commandDialogAtom); useKeyboardShortcut(["ctrl", "k"], () => setOpen((open) => !open)); return ( <CommandDialog open={open} onOpenChange={setOpen}> <CommandInput placeholder="Type a command or search..." /> <CommandList> <CommandEmpty>No results found.</CommandEmpty> <CommandGroup heading="Suggestions"> <CommandItem> <CalendarIcon className="mr-2 h-4 w-4" /> <span>Calendar</span> </CommandItem> <CommandItem> <FaceIcon className="mr-2 h-4 w-4" /> <span>Search Emoji</span> </CommandItem> <CommandItem> <RocketIcon className="mr-2 h-4 w-4" /> <span>Launch</span> </CommandItem> </CommandGroup> <CommandSeparator /> <CommandGroup heading="Settings"> <CommandItem> <PersonIcon className="mr-2 h-4 w-4" /> <span>Profile</span> <CommandShortcut>⌘P</CommandShortcut> </CommandItem> <CommandItem> <EnvelopeClosedIcon className="mr-2 h-4 w-4" /> <span>Mail</span> <CommandShortcut>⌘B</CommandShortcut> </CommandItem> <CommandItem> <GearIcon className="mr-2 h-4 w-4" /> <span>Settings</span> <CommandShortcut>⌘S</CommandShortcut> </CommandItem> </CommandGroup> </CommandList> </CommandDialog> ); }