Command Menu with Groups

1'use client';
2 
3import {
4  IconBell,
5  IconBolt,
6  IconCalendar,
7  IconChartBar,
8  IconChartPie,
9  IconClock,
10  IconFileText,
11  IconHelp,
12  IconKeyboard,
13  IconLayoutDashboard,
14  IconLayoutKanban,
15  IconLogout,
16  IconMessage,
17  IconPalette,
18  IconSettings,
19  IconSquareCheck,
20  IconTarget,
21  IconTrendingUp,
22  IconUsers,
23} from '@tabler/icons-react';
24import { useEffect, useState } from 'react';
25import { Button } from '@/components/ui/button';
26import {
27  Command,
28  CommandDialog,
29  CommandEmpty,
30  CommandGroup,
31  CommandInput,
32  CommandItem,
33  CommandList,
34} from '@/components/ui/command';
35import { Kbd } from '@/components/ui/kbd';
36 
37const workspaceItems = [
38  { icon: IconLayoutDashboard, label: 'Dashboard' },
39  { icon: IconLayoutKanban, label: 'Projects' },
40  { icon: IconSquareCheck, label: 'Tasks' },
41  { icon: IconCalendar, label: 'Calendar' },
42  { icon: IconUsers, label: 'Team members' },
43  { icon: IconMessage, label: 'Messages' },
44  { icon: IconFileText, label: 'Documents' },
45  { icon: IconBell, label: 'Notifications' },
46  { icon: IconClock, label: 'Time tracking' },
47  { icon: IconTarget, label: 'Goals' },
48];
49 
50const analyticsItems = [
51  { icon: IconChartBar, label: 'Overview' },
52  { icon: IconTrendingUp, label: 'Performance' },
53  { icon: IconChartPie, label: 'Reports' },
54  { icon: IconBolt, label: 'Insights' },
55];
56 
57const settingsItems = [
58  { icon: IconSettings, label: 'Preferences' },
59  { icon: IconPalette, label: 'Appearance' },
60  { icon: IconKeyboard, label: 'Keyboard shortcuts' },
61  { icon: IconHelp, label: 'Help & support' },
62  { icon: IconLogout, label: 'Sign out' },
63];
64 
65export function CommandMenu01() {
66  const [open, setOpen] = useState(true);
67 
68  useEffect(() => {
69    const down = (e: KeyboardEvent) => {
70      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
71        e.preventDefault();
72        setOpen((prev) => !prev);
73      }
74    };
75 
76    document.addEventListener('keydown', down);
77    return () => document.removeEventListener('keydown', down);
78  }, []);
79 
80  return (
81    <>
82      <Button onClick={() => setOpen(true)} variant="outline">
83        Open Command Menu
84      </Button>
85 
86      <CommandDialog onOpenChange={setOpen} open={open} showCloseButton={false}>
87        <Command>
88          <CommandInput
89            className="h-12"
90            placeholder="Type a command or search..."
91          />
92          <CommandList className="h-[320px] max-h-[320px]">
93            <CommandEmpty>No results found.</CommandEmpty>
94// … truncated