"use client"

import * as React from "react"
import { Moon, Radar, Radio, Setting2 } from "iconsax-react"

import {
  CommandPaletteCard,
  type CommandPaletteItem,
} from "@/registry/ui/command-palette-card/command-palette-card"

const ITEMS: CommandPaletteItem[] = [
  {
    id: "tx",
    label: "New transmission",
    group: "Actions",
    icon: <Radio size={16} color="currentColor" />,
    shortcut: "N",
    active: true,
  },
  {
    id: "scan",
    label: "Scan relays",
    group: "Actions",
    icon: <Radar size={16} color="currentColor" />,
    shortcut: "F",
  },
  {
    id: "theme",
    label: "Toggle theme",
    group: "Settings",
    icon: <Moon size={16} color="currentColor" />,
    shortcut: "T",
  },
  {
    id: "prefs",
    label: "Open preferences",
    group: "Settings",
    icon: <Setting2 size={16} color="currentColor" />,
    shortcut: ",",
  },
]

export default function CommandPaletteCardBasicDemo() {
  const [picked, setPicked] = React.useState<string | null>(null)

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <CommandPaletteCard
        items={ITEMS}
        placeholder="Search the mesh…"
        onSelect={setPicked}
      />
      {picked ? (
        <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
          selected · {picked}
        </p>
      ) : null}
    </div>
  )
}
Draw

Playground

Examples

Props
