command-palette-demo

1"use client";
2 
3import {
4  Calculator,
5  Calendar,
6  CreditCard,
7  Settings,
8  Smile,
9  User,
10} from "lucide-react";
11import { useState } from "react";
12import { Button } from "@/components/ui/button";
13import { CommandPalette } from "@/registry/default/ui/command-palette";
14 
15export default function CommandPaletteDemo() {
16  const [open, setOpen] = useState(false);
17 
18  const groups = [
19    {
20      id: "suggestions",
21      heading: "Suggestions",
22      items: [
23        {
24          id: "calendar",
25          label: "Calendar",
26          icon: Calendar,
27          onSelect: () => console.log("Calendar selected"),
28        },
29        {
30          id: "search-emoji",
31          label: "Search Emoji",
32          icon: Smile,
33          onSelect: () => console.log("Search Emoji selected"),
34        },
35        {
36          id: "calculator",
37          label: "Calculator",
38          icon: Calculator,
39          onSelect: () => console.log("Calculator selected"),
40        },
41      ],
42    },
43    {
44      id: "settings",
45      heading: "Settings",
46      items: [
47        {
48          id: "profile",
49          label: "Profile",
50          icon: User,
51          shortcut: ["⌘", "P"],
52          onSelect: () => console.log("Profile selected"),
53        },
54        {
55          id: "billing",
56          label: "Billing",
57          icon: CreditCard,
58          shortcut: ["⌘", "B"],
59          onSelect: () => console.log("Billing selected"),
60        },
61        {
62          id: "settings",
63          label: "Settings",
64          icon: Settings,
65          shortcut: ["⌘", "S"],
66          onSelect: () => console.log("Settings selected"),
67        },
68      ],
69    },
70  ];
71 
72  return (
73    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4">
74      <p className="text-muted-foreground text-sm">
75        Press{" "}
76        <kbd className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
77          ⌘K
78        </kbd>{" "}
79        to open the command palette
80      </p>
81      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
82 
83      <CommandPalette open={open} onOpenChange={setOpen} groups={groups} />
84    </div>
85  );
86}