Command

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/bases/radix/components/example"
9import { Button } from "@/registry/bases/radix/ui/button"
10import {
11  Command,
12  CommandDialog,
13  CommandEmpty,
14  CommandGroup,
15  CommandInput,
16  CommandItem,
17  CommandList,
18  CommandSeparator,
19  CommandShortcut,
20} from "@/registry/bases/radix/ui/command"
21import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
22 
23export default function CommandExample() {
24  return (
25    <ExampleWrapper>
26      <CommandBasic />
27      <CommandWithShortcuts />
28      <CommandWithGroups />
29      <CommandManyItems />
30    </ExampleWrapper>
31  )
32}
33 
34function CommandBasic() {
35  const [open, setOpen] = React.useState(false)
36 
37  return (
38    <Example title="Basic">
39      <div className="flex flex-col gap-4">
40        <Button
41          onClick={() => setOpen(true)}
42          variant="outline"
43          className="w-fit"
44        >
45          Open Menu
46        </Button>
47        <CommandDialog open={open} onOpenChange={setOpen}>
48          <Command>
49            <CommandInput placeholder="Type a command or search..." />
50            <CommandList>
51              <CommandEmpty>No results found.</CommandEmpty>
52              <CommandGroup heading="Suggestions">
53                <CommandItem>Calendar</CommandItem>
54                <CommandItem>Search Emoji</CommandItem>
55                <CommandItem>Calculator</CommandItem>
56              </CommandGroup>
57            </CommandList>
58          </Command>
59        </CommandDialog>
60      </div>
61    </Example>
62  )
63}
64 
65function CommandWithShortcuts() {
66  const [open, setOpen] = React.useState(false)
67 
68  return (
69    <Example title="With Shortcuts">
70      <div className="flex flex-col gap-4">
71        <Button
72          onClick={() => setOpen(true)}
73          variant="outline"
74          className="w-fit"
75        >
76          Open Menu
77        </Button>
78        <CommandDialog open={open} onOpenChange={setOpen}>
79          <Command>
80            <CommandInput placeholder="Type a command or search..." />
81            <CommandList>
82              <CommandEmpty>No results found.</CommandEmpty>
83              <CommandGroup heading="Settings">
84                <CommandItem>
85                  <IconPlaceholder
86                    lucide="UserIcon"
87                    tabler="IconUser"
88                    hugeicons="UserIcon"
89                    phosphor="UserIcon"
90                  />
91                  <span>Profile</span>
92// … truncated