71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|