Command

import { Command } from "@/ui/Command";

<Command.Root>
  <Command.Input placeholder="Type a command..." />
  <Command.List>
    <Command.Group>
      <Command.Label>Navigation</Command.Label>
      <Command.Item value="Go to dashboard">Go to dashboard</Command.Item>
      <Command.Item value="Open settings">Open settings</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

function CommandRoot({ children }: { children: React.ReactNode }) {
  return <div className="rounded-xl border border-slate-200 bg-white">{children}</div>;
}

type CommandCompound = typeof CommandRoot & { Root: typeof CommandRoot };
export const Command = Object.assign(CommandRoot, { Root: CommandRoot }) as CommandCompound;