Command palette

import * as React from "react";
import { Button } from "@/components/ui/button";
import { CommandPalette } from "@/components/ui/command-palette";
import { Inbox, Search, Zap } from "@/components/ui/icons";
import { Kbd } from "@/components/ui/kbd";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  const [last, setLast] = React.useState("");
  return (
    <div style={{ display: "grid", gap: 10, justifyItems: "center" }}>
      <Button variant="soft" onClick={() => setOpen(true)}>Search <Kbd size="sm">⌘K</Kbd></Button>
      {last ? <span className="text-body-small text-fg-secondary">You picked: {last}</span> : null}
      <CommandPalette
        open={open}
        onClose={() => setOpen(false)}
        groups={[
          { heading: "Go to", items: [{ id: "orders", label: "Orders", icon: <Inbox />, onSelect: () => setLast("Orders") }, { id: "search", label: "Find a tea", icon: <Search />, shortcut: ["⌘", "F"], onSelect: () => setLast("Find a tea") }] },
          { heading: "Actions", items: [{ id: "new", label: "New order", icon: <Zap />, shortcut: ["⌘", "N"], onSelect: () => setLast("New order") }] },
        ]}
      />
    </div>
  );
}