File size: 3,766 Bytes
9853396 | 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 | import React from 'react';
import { useNavigate, useRouter } from '@tanstack/react-router';
import { IconArrowRightDashed, IconChevronRight, IconDeviceLaptop, IconMoon, IconSun } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { useSearch } from '@/context/search-context';
import { useTheme } from '@/context/theme-context';
import {
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
} from '@/components/ui/command';
import { useSidebarData } from '../sidebar';
import { ScrollArea } from './ui/scroll-area';
export function CommandMenu() {
const router = useRouter();
const { setTheme } = useTheme();
const { open, setOpen } = useSearch();
const sidebarData = useSidebarData();
const { t } = useTranslation();
// Don't render if router is not available
if (!router) {
return null;
}
const navigate = useNavigate();
const runCommand = React.useCallback(
(command: () => unknown) => {
setOpen(false);
command();
},
[setOpen]
);
return (
<CommandDialog modal open={open} onOpenChange={setOpen}>
<CommandInput placeholder={t('command.placeholder')} />
<CommandList>
<ScrollArea type='hover' className='h-72 pr-1'>
<CommandEmpty>{t('command.noResults')}</CommandEmpty>
{sidebarData.navGroups.map((group) => (
<CommandGroup key={group.title} heading={group.title}>
{group.items.map((navItem, i) => {
if (navItem.url)
return (
<CommandItem
key={`${navItem.url}-${i}`}
value={navItem.title}
onSelect={() => {
runCommand(() => navigate({ to: 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, i) => (
<CommandItem
key={`${navItem.title}-${subItem.url}-${i}`}
value={`${navItem.title}-${subItem.url}`}
onSelect={() => {
runCommand(() => navigate({ to: 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={t('command.theme')}>
<CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
<IconSun /> <span>{t('theme.light')}</span>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
<IconMoon className='scale-90' />
<span>{t('theme.dark')}</span>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
<IconDeviceLaptop />
<span>{t('theme.system')}</span>
</CommandItem>
</CommandGroup>
</ScrollArea>
</CommandList>
</CommandDialog>
);
}
|