Command Menu

"use client";

import { type ReactNode, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, type KeyboardEvent } from "react";
import { createPortal } from "react-dom";
import { motion } from "motion/react";
import { IconChevronRight, IconCornerDownLeft, IconSearch } from "@tabler/icons-react";
import { cn } from "@/lib/utils";

export type CommandItem = {
  id: string;
  label: string;
  /** Which filter the item belongs to. Also picks its group heading. */
  type: string;
  icon?: ReactNode;
  /** Quiet text after the label. Searched, but never highlighted. */
  description?: string;
  /** Extra words that find the item, e.g. "add member" for "Invite teammate". */
  keywords?: string[];
  /** Keys shown on the right, one chip each. "mod" becomes ⌘ or Ctrl. With `hotkeys` on, ["mod", "N"] is a chord and ["G", "D"] a sequence. */
  shortcut?: string[];
  /** Shown dimmed and skipped by the keyboard; it can't be run. */
  disabled?: boolean;
  /** Opens a nested page of commands instead of running. */
  children?: CommandItem[];