gitscope
← marzneshin / v0.3.1 / dashboard/src/features/entity-table/components/sidebar-entity-selection.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/entity-table/components/sidebar-entity-selection.tsx · TypeScript
Blame Raw
 1import {
 2    ToggleGroup, ToggleGroupItem,
 3    Table, TableHeader, TableRow, TableBody, TableHead,
 4    ScrollArea, Button,
 5} from "@marzneshin/components";
 6import { cn } from "@marzneshin/utils";
 7import {
 8    SidebarEntityCard,
 9} from "@marzneshin/features/entity-table/components";
10import {
11    useEntityTableContext,
12    useSidebarEntityTableContext
13} from "@marzneshin/features/entity-table/contexts";
14import { useTranslation } from "react-i18next";
15
16export const SidebarEntitySelection = () => {
17    const {
18        sidebarEntityId,
19        sidebarEntities,
20        setSidebarEntityId,
21        sidebarCardProps,
22    } = useSidebarEntityTableContext()
23    const { table } = useEntityTableContext()
24
25    const scrollBarHeight = table.getState().pagination.pageSize <= 10 ? "max-h-[45rem]" : "max-h-full"
26    const { t } = useTranslation();
27
28    return (
29        <Table className="w-full">
30            <TableHeader>
31                <TableRow>
32                    <TableHead className="hstack justify-between items-center">
33                        {t("inbounds")}
34                        <Button
35                            variant="ghost"
36                            size="sm"
37                            className="p-1"
38                            onMouseDown={() => setSidebarEntityId(undefined)}
39                        >
40                            {t('deselect')}
41                        </Button>
42                    </TableHead>
43                </TableRow>
44            </TableHeader>
45            <TableBody>
46                <ToggleGroup
47                    type="single"
48                    onValueChange={(value) => setSidebarEntityId(value === "" ? undefined : value)}
49                    defaultValue={String(sidebarEntityId)}
50                >
51                    <ScrollArea className={cn("flex flex-col justify-start p-1 gap-3 h-full", scrollBarHeight)}>
52                        {sidebarEntities.map((entity: any) => (
53                            <ToggleGroupItem
54                                className="px-0 w-full h-full"
55                                value={String(entity.id)}
56                                key={String(entity.id)}
57                                id={String(entity.id)}>
58                                <SidebarEntityCard
59                                    {...sidebarCardProps}
60                                    entity={entity}
61                                    checked={sidebarEntityId === String(entity.id)}
62                                />
63                            </ToggleGroupItem>
64                        ))}
65                    </ScrollArea>
66                </ToggleGroup>
67            </TableBody>
68        </Table>
69    )
70}