Command Menu

1"use client";
2 
3import * as React from "react";
4import { useRouter } from "next/navigation";
5import { useTheme } from "next-themes";
6import { Moon, Sun, Monitor, Search } from "lucide-react";
7 
8import {
9  CommandDialog,
10  CommandEmpty,
11  CommandGroup,
12  CommandInput,
13  CommandItem,
14  CommandList,
15  CommandSeparator,
16} from "@/components/ui/command";
17import { Kbd, KbdGroup } from "@/components/ui/kbd";
18import { cn } from "@/lib/utils";
19 
20export type CommandMenuItemDef = {
21  /** Display label */
22  label: string;
23  /** Lucide or any icon component */
24  icon?: React.ComponentType<{ className?: string }>;
25  /** Route to navigate to (uses next/navigation router.push) */
26  href?: string;
27  /** Custom action — used instead of href when provided */
28  action?: () => void;
29  /** Extra keywords for matching */
30  keywords?: string[];
31};
32 
33export type CommandMenuGroupDef = {
34  /** Heading rendered above the group */
35  heading: string;
36  items: CommandMenuItemDef[];
37};
38 
39export interface CommandMenuTriggerProps
40  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
41  /** Label text inside the trigger button */
42  label?: string;
43  /** Keyboard shortcut hint shown on the right */
44  shortcut?: string;
45  /** Whether to show the keyboard shortcut badge */
46  showShortcut?: boolean;
47}
48 
49export interface CommandMenuProps {
50  /** CommandGroup definitions rendered in the dialog */
51  groups?: CommandMenuGroupDef[];
52  /** Whether to include the built-in Theme group */
53  showThemeGroup?: boolean;
54  /** Placeholder text inside the search input */
55  placeholder?: string;
56  /** Key portion of the keyboard shortcut (⌘ / Ctrl + key) */
57  shortcutKey?: string;
58  /** Delay in ms before the dialog content becomes visible (avoids layout pop) */
59  contentDelay?: number;
60  /** Custom trigger element. When provided the default button is NOT rendered. */
61  trigger?: React.ReactNode;
62  /** Props forwarded to the default trigger button */
63  triggerProps?: CommandMenuTriggerProps;
64  /** Extra className on the root CommandDialog */
65  className?: string;
66}
67 
68function CommandMenuTrigger({
69  label = "Search…",
70  shortcut = "K",
71  showShortcut = true,
72  className,
73  onClick,
74  ...props
75}: CommandMenuTriggerProps) {
76  return (
77    <button
78      type="button"
79      onClick={onClick}
80      className={cn(
81        "flex items-center gap-2 rounded-lg border bg-background/60 backdrop-blur-sm px-3 py-2 text-sm text-muted-foreground hover:bg-accent/50 transition-colors w-full max-w-sm cursor-pointer",
82// … truncated