CommandPalette

import { useState } from "react";
import { CommandPalette, Button } from "mizu-ui";

export function Example() {
  const [open, setOpen] = useState(false),
    [result, setResult] = useState("Choose a command.");
  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open commands</Button>
      <p role="status" className="mizu-field-hint">
        {result}
      </p>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        commands={[
          {
            id: "new",
            label: "Create a draft",
            description: "Start a new local record",
            onSelect: () => setResult("Draft created."),
          },
          {
            id: "review",
            label: "Review the release",
            description: "Open the review queue",
            onSelect: () => setResult("Review queue opened."),
          },
          {
            id: "save",
            label: "Save changes",
            shortcut: "⌘ S",
            onSelect: () => setResult("Changes saved."),
          },
        ]}
      />
    </div>
  );
}