-
Notifications
You must be signed in to change notification settings - Fork 28
Expand file tree
/
Copy pathcommand-menu.tsx
More file actions
105 lines (96 loc) · 4.43 KB
/
command-menu.tsx
File metadata and controls
105 lines (96 loc) · 4.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React from 'react'
import {
IconArrowRightDashed,
IconChevronRight,
IconDeviceLaptop,
IconMoon,
IconSun,
} from '@tabler/icons-react'
import { useSearch } from '@/providers/search-provider/search-provider'
import { useTheme } from '@/providers/theme-provider/theme-provider'
import {
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
} from '@/components/ui/command'
import { useSidebarData } from '@/components/layout/app-sidebar/data/sidebar-data'
import { ScrollArea } from './ui/scroll-area'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
export function CommandMenu() {
const navigate = useNavigate()
const { setTheme } = useTheme()
const { open, setOpen } = useSearch()
const runCommand = React.useCallback(
(command: () => unknown) => {
setOpen(false)
command()
},
[setOpen]
)
const { t } = useTranslation() ;
const sidebarData = useSidebarData();
return (
<CommandDialog modal open={open} onOpenChange={setOpen}>
<CommandInput placeholder={t("navbar.command")} />
<CommandList>
<ScrollArea type='hover' className='h-72 pr-1'>
<CommandEmpty>No results found.</CommandEmpty>
{sidebarData.navGroups.map((group: any) => (
<CommandGroup key={group.title} heading={group.title}>
{group.items.map((navItem: any, i: number) => {
if (navItem.url)
return (
<CommandItem
key={`${navItem.url}-${i}`}
value={navItem.title}
onSelect={() => {
runCommand(() => navigate(navItem.url))
}}
>
<div className='mr-2 flex h-4 w-4 items-center justify-center'>
<IconArrowRightDashed className='text-muted-foreground/80 size-2' />
</div>
{navItem.title}
</CommandItem>
)
return navItem.items?.map((subItem: any, i: number) => (
<CommandItem
key={`${navItem.title}-${subItem.url}-${i}`}
value={`${navItem.title}-${subItem.url}`}
onSelect={() => {
runCommand(() => navigate(subItem.url))
}}
>
<div className='mr-2 flex h-4 w-4 items-center justify-center'>
<IconArrowRightDashed className='text-muted-foreground/80 size-2' />
</div>
{navItem.title} <IconChevronRight /> {subItem.title}
</CommandItem>
))
})}
</CommandGroup>
))}
<CommandSeparator />
<CommandGroup heading='Theme'>
<CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
<IconSun /> <span>{t("menu.light")}</span>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
<IconMoon className='scale-90' />
<span>{t("menu.dark")}</span>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
<IconDeviceLaptop />
<span>{t("menu.system")}</span>
</CommandItem>
</CommandGroup>
</ScrollArea>
</CommandList>
</CommandDialog>
)
}