Command

import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from "@araf-ds/core"

export default function Example() {
  const [open, setOpen] = useState(false)

  // Open with ⌘K
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen(prev => !prev)
      }
    }
    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  return (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Navigation">
          <CommandItem>
            <HomeIcon size={14} />
            Home
            <CommandShortcut>G H</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <UserIcon size={14} />
            Profile
            <CommandShortcut>G P</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Actions">
          <CommandItem>
            <PlusIcon size={14} />
            New document
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  )
}

<Command className="rounded-lg border shadow-md w-[320px]">
  <CommandInput placeholder="Search frameworks..." />
  <CommandList>
    <CommandEmpty>No framework found.</CommandEmpty>
    <CommandGroup>
      {frameworks.map(fw => (
        <CommandItem
          key={fw.value}
          value={fw.value}
          onSelect={setValue}
        >
          <CheckIcon
            className={cn(value === fw.value ? "opacity-100" : "opacity-0")}
            size={12}
          />
          {fw.label}
        </CommandItem>
      ))}
    </CommandGroup>
  </CommandList>
</Command>

// Trigger button shown in the UI
<Button
  variant="outline"
  onClick={() => setOpen(true)}
  className="gap-2 text-muted-foreground"
>
  <SearchIcon size={14} />
  Search...
  <kbd className="ml-auto text-xs border rounded px-1">⌘K</kbd>
</Button>

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem onSelect={() => router.push("/dashboard")}>
        <LayoutDashboardIcon size={14} /> Dashboard
      </CommandItem>
      <CommandItem onSelect={() => router.push("/settings")}>
        <SettingsIcon size={14} /> Settings
        <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>