Command

"use client";

import * as React from "react";
import { Command } from "@crisp-ui-kit/crisp";

export function Example() {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
        event.preventDefault();
        setOpen(true);
      }
    }
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, []);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open command palette</button>
      <Command open={open} onOpenChange={setOpen} />
    </>
  );
}

<Button intent="primary" onClick={() => setOpen(true)}>
  Open command palette
</Button>
<Command open={open} onOpenChange={setOpen} />

import { House, Settings } from "lucide-react";

const items = [
  { id: "home", label: "Go to Home", icon: House, shortcut: ["G", "H"] },
  { id: "settings", label: "Settings", icon: Settings, keywords: ["preferences"] },
];

<Command open={open} onOpenChange={setOpen} items={items} />;

import { Command, defaultCommandItems, type CommandSection } from "@crisp-ui-kit/crisp";
import { Mail, Star, Sparkles, LayoutGrid, Columns3 } from "lucide-react";

const pageSections: CommandSection[] = [
  {
    title: "All Companies", // the CURRENT VIEW's name, not a fixed "All {Object}"
    items: [
      { id: "compose-email", label: "Compose email", icon: Mail, secondary: "To Selected", shortcut: ["C"] },
      { id: "add-to-favorites", label: "Add to favorites", icon: Star, secondary: "All Companies" },
      { id: "ask-attio-view", label: "Ask Attio", icon: Sparkles, secondary: "All Companies", shortcut: ["⌘", "J"] },
    ],
  },
  {
    title: "Companies", // the object's plural name
    items: [
      { id: "create-view", label: "Create view", icon: LayoutGrid, secondary: "Companies" },
      { id: "create-column", label: "Create column", icon: Columns3, secondary: "All Companies" },
    ],
  },
];

// omit Ask Attio/Compose email from the page-agnostic set — pageSections
// above already covers them for this page, scoped to the current view
const items = defaultCommandItems.filter(
  (item) => item.id !== "ask-attio" && item.id !== "compose-email",
);

<Command open={open} onOpenChange={setOpen} items={items} pageSections={pageSections} />;

"use client";

import * as React from "react";
import { Command, type CommandItem } from "@crisp-ui-kit/crisp";
import { CircleDollarSign } from "lucide-react";

export function Example({ open, setOpen }: { open: boolean; setOpen: (v: boolean) => void }) {
  const [query, setQuery] = React.useState("");
  const [items, setItems] = React.useState<CommandItem[]>([]);

  React.useEffect(() => {
    if (!query.trim()) return setItems([]);
    const controller = new AbortController();
    searchTransactions(query, controller.signal).then((results) =>
      setItems(
        results.map((t) => ({
          id: t.id,
          label: t.description,
          icon: CircleDollarSign,
          onSelect: () => openTransaction(t.id),
        })),
      ),
    );
    return () => controller.abort();
  }, [query]);

  return (
    <Command
      open={open}
      onOpenChange={setOpen}
      items={items}
      query={query}
      onQueryChange={setQuery}
      filterItems={false}
      emptyLabel={query ? "No matching transactions" : "Type to search…"}
    />
  );
}