gitscope
← marzneshin / v0.6.0 / dashboard/src/features/search-command/command-items.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/search-command/command-items.tsx · TypeScript
Blame Raw
 1// CommandItems.tsx
 2import React, { FC } from "react";
 3import {
 4    CommandGroup,
 5    CommandItem,
 6    CommandSeparator,
 7} from "@marzneshin/components";
 8import { useNavigate } from "@tanstack/react-router";
 9import { useTranslation } from "react-i18next";
10import { CommandGroupConfig, CommandItemConfig } from "./commands";
11
12interface CommandItemsProps {
13    items: CommandGroupConfig[];
14    isSudo: () => boolean;
15    setOpen: (open: boolean) => void;
16}
17
18export const CommandItems: FC<CommandItemsProps> = ({ items, isSudo, setOpen }) => {
19    const navigate = useNavigate();
20    const { t } = useTranslation();
21
22    return (
23        <>
24            {items.map((group: CommandGroupConfig, groupIndex: number) => (
25                <React.Fragment key={group.group}>
26                    <CommandGroup heading={group.group}>
27                        {group.items.map((item: CommandItemConfig) => (
28                            (!item.sudo || isSudo()) && (
29                                <CommandItem
30                                    key={item.label}
31                                    onSelect={() => {
32                                        navigate({ to: item.path });
33                                        setOpen(false);
34                                    }}
35                                >
36                                    <item.icon className="mr-2 size-4" />
37                                    <span>{t(item.label)}</span>
38                                </CommandItem>
39                            )
40                        ))}
41                    </CommandGroup>
42                    {groupIndex < items.length - 1 && <CommandSeparator />}
43                </React.Fragment>
44            ))}
45        </>
46    );
47};