← marzneshin
/
v0.4.1
/
dashboard/src/features/entity-table/components/sidebar-entity-selection.tsx
https://dev.kronoz.win/r/marzneshin.git
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}