Command

---
import { Card, CardContent } from "@/components/ui/card"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"
---

<Card class="w-full max-w-md p-0">
  <CardContent class="p-0">
    <Command>
      <CommandInput placeholder="Search commands..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Icon name="calendar" />
            Calendar
          </CommandItem>
          <CommandItem>
            <Icon name="smile" />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <Icon name="calculator" />
            Calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <Icon name="user" />
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Icon name="credit-card" />
            Billing
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Icon name="settings" />
            Settings
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CardContent>
</Card>

---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Icon } from "@/components/ui/icon"
---

<Dialog>
  <DialogTrigger variant="outline">Open Command Menu</DialogTrigger>
  <DialogContent
    class="top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0"
    showCloseButton={false}
  >
    <DialogHeader class="sr-only">
      <DialogTitle>Command Palette</DialogTitle>
      <DialogDescription>Search for a command to run...</DialogDescription>
    </DialogHeader>
    <Command>
      <CommandInput placeholder="Search commands..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Icon name="calendar" />
            Calendar
          </CommandItem>
          <CommandItem>
            <Icon name="search" />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <Icon name="calculator" />
            Calculator
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </DialogContent>
</Dialog>

---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"
---

<Command class="ring-foreground/10 w-full max-w-md ring-1">
  <CommandInput placeholder="Search shortcuts..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Quick actions">
      <CommandItem>
        <Icon name="mail" />
        Send email
        <CommandShortcut>⌘E</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Icon name="rocket" />
        Deploy project
        <CommandShortcut>⌘D</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Icon name="settings" />
        Open settings
        <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Icon name="keyboard" />
        Keyboard shortcuts
        <CommandShortcut>?</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"
---

<Command class="ring-foreground/10 w-full max-w-md ring-1">
  <CommandInput placeholder="Search actions..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <Icon name="calendar" />
        Calendar
      </CommandItem>
      <CommandItem>
        <Icon name="file-text" />
        Notes
      </CommandItem>
      <CommandItem>
        <Icon name="folder" />
        Projects
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Account">
      <CommandItem>
        <Icon name="user" />
        Profile
      </CommandItem>
      <CommandItem>
        <Icon name="credit-card" />
        Billing
      </CommandItem>
      <CommandItem>
        <Icon name="settings" />
        Settings
      </CommandItem>
      <CommandItem>
        <Icon name="bolt" />
        API Keys
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"

const recentSearches = Array.from({ length: 18 }, (_, index) => ({
  label: `Recent search ${index + 1}`,
  value: `recent-search-${index + 1}`,
}))
---

<Command class="ring-foreground/10 h-[24.5rem] w-full max-w-md ring-1">
  <CommandInput placeholder="Search recent activity..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Recent">
      {
        recentSearches.map((item) => (
          <CommandItem value={item.value}>
            <Icon name="clock" />
            {item.label}
          </CommandItem>
        ))
      }
    </CommandGroup>
  </CommandList>
</Command>