command-palette-custom-demo

1"use client";
2 
3import {
4  Bell,
5  Github,
6  HelpCircle,
7  MessageSquare,
8  Palette,
9  Plus,
10  Search,
11  Settings,
12  Shield,
13  Twitter,
14  User,
15  Zap,
16} from "lucide-react";
17import { useState } from "react";
18import { Button } from "@/components/ui/button";
19import { CommandPalette } from "@/registry/default/ui/command-palette";
20 
21export default function CommandPaletteCustomDemo() {
22  const [open, setOpen] = useState(false);
23  const [loading, setLoading] = useState(false);
24 
25  // Simulate loading state when searching
26  const handleOpenChange = (isOpen: boolean) => {
27    setOpen(isOpen);
28    if (isOpen) {
29      setLoading(true);
30      setTimeout(() => setLoading(false), 800);
31    }
32  };
33 
34  const groups = [
35    {
36      id: "actions",
37      heading: "Quick Actions",
38      items: [
39        {
40          id: "new-file",
41          label: "Create New File",
42          description: "Create a new document in the current folder",
43          icon: Plus,
44          shortcut: ["⌘", "N"],
45          onSelect: () => console.log("New file created"),
46        },
47        {
48          id: "search-docs",
49          label: "Search Documentation",
50          description: "Find answers in our comprehensive docs",
51          icon: Search,
52          onSelect: () => console.log("Searching docs"),
53        },
54      ],
55    },
56    {
57      id: "settings-nav",
58      heading: "Settings & Configuration",
59      items: [
60        {
61          id: "settings-menu",
62          label: "System Settings",
63          description: "Manage your account, security, and preferences",
64          icon: Settings,
65          children: [
66            {
67              id: "account-group",
68              heading: "Account",
69              items: [
70                {
71                  id: "profile",
72                  label: "Edit Profile",
73                  icon: User,
74                  onSelect: () => console.log("Profile selected"),
75                },
76                {
77                  id: "security",
78                  label: "Security & Privacy",
79                  icon: Shield,
80                  onSelect: () => console.log("Security selected"),
81                },
82              ],
83            },
84            {
85              id: "pref-group",
86              heading: "Preferences",
87              items: [
88                {
89                  id: "notifications",
90                  label: "Notifications",
91                  icon: Bell,
92                  onSelect: () => console.log("Notifications selected"),
93                },
94// … truncated