Command

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/radix-sera/components/example"
9import { Button } from "@/registry/radix-sera/ui/button"
10import { Card, CardContent } from "@/registry/radix-sera/ui/card"
11import {
12  Command,
13  CommandDialog,
14  CommandEmpty,
15  CommandGroup,
16  CommandInput,
17  CommandItem,
18  CommandList,
19  CommandSeparator,
20  CommandShortcut,
21} from "@/registry/radix-sera/ui/command"
22import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
23 
24export default function CommandExample() {
25  return (
26    <ExampleWrapper>
27      <CommandInline />
28      <CommandBasic />
29      <CommandWithShortcuts />
30      <CommandWithGroups />
31      <CommandManyItems />
32    </ExampleWrapper>
33  )
34}
35 
36function CommandInline() {
37  return (
38    <Example title="Inline">
39      <Card className="w-full p-0">
40        <CardContent className="p-0">
41          <Command>
42            <CommandInput placeholder="Type a command or search..." />
43            <CommandList>
44              <CommandEmpty>No results found.</CommandEmpty>
45              <CommandGroup heading="Suggestions">
46                <CommandItem>
47                  <IconPlaceholder
48                    lucide="CalendarIcon"
49                    tabler="IconCalendar"
50                    hugeicons="CalendarIcon"
51                    phosphor="CalendarBlankIcon"
52                    remixicon="RiCalendarLine"
53                  />
54                  <span>Calendar</span>
55                </CommandItem>
56                <CommandItem>
57                  <IconPlaceholder
58                    lucide="SmileIcon"
59                    tabler="IconMoodSmile"
60                    hugeicons="SmileIcon"
61                    phosphor="SmileyIcon"
62                    remixicon="RiEmotionLine"
63                  />
64                  <span>Search Emoji</span>
65                </CommandItem>
66                <CommandItem>
67                  <IconPlaceholder
68                    lucide="CalculatorIcon"
69                    tabler="IconCalculator"
70                    hugeicons="CalculatorIcon"
71                    phosphor="CalculatorIcon"
72                    remixicon="RiCalculatorLine"
73                  />
74                  <span>Calculator</span>
75                </CommandItem>
76              </CommandGroup>
77              <CommandSeparator />
78              <CommandGroup heading="Settings">
79                <CommandItem>
80                  <IconPlaceholder
81                    lucide="UserIcon"
82// … truncated