Command Menu with Documentation Search

1'use client';
2 
3import { IconArrowRight, IconCornerDownLeft } from '@tabler/icons-react';
4import { useRouter } from 'next/navigation';
5import { useCallback, useEffect, useState } from 'react';
6import { Button } from '@/components/ui/button';
7import {
8  Command,
9  CommandEmpty,
10  CommandGroup,
11  CommandInput,
12  CommandItem,
13  CommandList,
14} from '@/components/ui/command';
15import {
16  Dialog,
17  DialogContent,
18  DialogDescription,
19  DialogHeader,
20  DialogTitle,
21} from '@/components/ui/dialog';
22import { Kbd } from '@/components/ui/kbd';
23 
24const navItems = [
25  { href: '/', label: 'Home', keywords: ['home', 'main', 'index'] },
26  {
27    href: '/dashboard',
28    label: 'Dashboard',
29    keywords: ['dashboard', 'overview'],
30  },
31  {
32    href: '/settings',
33    label: 'Settings',
34    keywords: ['settings', 'preferences'],
35  },
36];
37 
38const pageGroups = [
39  {
40    name: 'Getting Started',
41    pages: [
42      {
43        name: 'Introduction',
44        href: '/docs/introduction',
45        keywords: ['intro', 'start'],
46      },
47      {
48        name: 'Installation',
49        href: '/docs/installation',
50        keywords: ['install', 'setup'],
51      },
52      {
53        name: 'Quick Start',
54        href: '/docs/quick-start',
55        keywords: ['quick', 'begin'],
56      },
57    ],
58  },
59  {
60    name: 'Utilities',
61    pages: [
62      {
63        name: 'Typography',
64        href: '/docs/utilities/typography',
65        keywords: ['text', 'font'],
66      },
67      {
68        name: 'Colors',
69        href: '/docs/utilities/colors',
70        keywords: ['color', 'theme'],
71      },
72      {
73        name: 'Spacing',
74        href: '/docs/utilities/spacing',
75        keywords: ['margin', 'padding'],
76      },
77    ],
78  },
79];
80 
81const colorGroups = [
82  {
83    name: 'Neutral',
84    colors: [
85      {
86        name: 'Neutral 50',
87        className: 'neutral-50',
88        value: 'oklch(0.985 0 0)',
89      },
90      {
91        name: 'Neutral 100',
92        className: 'neutral-100',
93        value: 'oklch(0.97 0 0)',
94      },
95      {
96        name: 'Neutral 200',
97        className: 'neutral-200',
98        value: 'oklch(0.922 0 0)',
99      },
100      {
101        name: 'Neutral 500',
102        className: 'neutral-500',
103        value: 'oklch(0.556 0 0)',
104      },
105      {
106        name: 'Neutral 900',
107        className: 'neutral-900',
108        value: 'oklch(0.205 0 0)',
109      },
110    ],
111  },
112  {
113    name: 'Blue',
114    colors: [
115      {
116        name: 'Blue 50',
117        className: 'blue-50',
118        value: 'oklch(0.97 0.014 254.604)',
119      },
120      {
121// … truncated