Command

1import {
2  Command,
3  CommandEmpty,
4  CommandGroup,
5  CommandInput,
6  CommandItem,
7  CommandList,
8  CommandSeparator,
9  CommandShortcut,
10} from "passport-ui";
11import { Calendar, User, Settings } from "lucide-react";

1<Command className="rounded-lg border shadow-md">
2  <CommandInput placeholder="Type a command or search…" />
3  <CommandList>
4    <CommandEmpty>No results found.</CommandEmpty>
5    <CommandGroup heading="Suggestions">
6      <CommandItem>
7        <Calendar />
8        <span>Calendar</span>
9      </CommandItem>
10      <CommandItem>
11        <User />
12        <span>Search Emoji</span>
13      </CommandItem>
14    </CommandGroup>
15    <CommandSeparator />
16    <CommandGroup heading="Settings">
17      <CommandItem>
18        <User />
19        <span>Profile</span>
20        <CommandShortcut>⌘P</CommandShortcut>
21      </CommandItem>
22      <CommandItem>
23        <Settings />
24        <span>Settings</span>
25        <CommandShortcut>⌘S</CommandShortcut>
26      </CommandItem>
27    </CommandGroup>
28  </CommandList>
29</Command>