Command palette

import { Input, Kbd, KbdSequence } from "@novix-ui/react";
import * as Dialog from "@radix-ui/react-dialog";
import { Command } from "cmdk";
 
export function CommandPalette({ open, onOpenChange, items, actions }) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-background/60 backdrop-blur-sm" />
        <Dialog.Content className="fixed left-1/2 top-24 w-[min(92vw,640px)] -translate-x-1/2 rounded-2xl border shadow-glow">
          <Command>
            <Command.Input placeholder="Search…" />
            <Command.List>
              <Command.Group heading="Recents">
                {items.map((r) => <Command.Item key={r.id}>{r.title}</Command.Item>)}
              </Command.Group>
              <Command.Group heading="Actions">
                {actions.map((a) => (
                  <Command.Item key={a.id} onSelect={a.run}>
                    {a.label}
                    <KbdSequence keys={a.shortcut} className="ml-auto" />
                  </Command.Item>
                ))}
              </Command.Group>
            </Command.List>
          </Command>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}