gitscope
/
← marzneshin / app/dashboard/src/pages/hosts/inbounds-sidebar/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/hosts/inbounds-sidebar/index.tsx · v0.2.1
Source
1 8d27a8d Mrdn 2y ago import { Box, Table, Thead, Tbody, Th, Td, Tr, HStack } from '@chakra-ui/react';
2 6aab6f0 Mrdn 2y ago import classNames from 'classnames';
3 6aab6f0 Mrdn 2y ago import { InboundCard } from 'components/inbounds-card';
4 6aab6f0 Mrdn 2y ago import { handleSort } from 'components/table';
5 16e5ea1 Mrdn 2y ago import { FC } from 'react';
6 6aab6f0 Mrdn 2y ago import { useTranslation } from 'react-i18next';
7 fca98f0 Mrdn 2y ago import { useEffect } from 'react';
8 16e5ea1 Mrdn 2y ago import { useInbounds } from 'stores';
9 16e5ea1 Mrdn 2y ago import { InboundType } from 'types';
10 6aab6f0 Mrdn 2y ago
11 16e5ea1 Mrdn 2y ago type InboundsSidebarProps = {
12 16e5ea1 Mrdn 2y ago inbounds: InboundType[];
13 16e5ea1 Mrdn 2y ago }
14 16e5ea1 Mrdn 2y ago
15 16e5ea1 Mrdn 2y ago export const InboundsSidebar: FC<InboundsSidebarProps> = ({
16 16e5ea1 Mrdn 2y ago inbounds,
17 16e5ea1 Mrdn 2y ago }) => {
18 6aab6f0 Mrdn 2y ago const {
19 6aab6f0 Mrdn 2y ago onInboundsFilterChange,
20 6aab6f0 Mrdn 2y ago inboundsFilters: filters,
21 6aab6f0 Mrdn 2y ago selectedInbound,
22 6aab6f0 Mrdn 2y ago selectInbound,
23 16e5ea1 Mrdn 2y ago refetchHosts,
24 6aab6f0 Mrdn 2y ago } = useInbounds();
25 a61ba53 Mrdn 2y ago
26 fca98f0 Mrdn 2y ago useEffect(() => {
27 fca98f0 Mrdn 2y ago selectedInbound === undefined && selectInbound(inbounds[0]);
28 fca98f0 Mrdn 2y ago }, [selectedInbound, inbounds]);
29 a61ba53 Mrdn 2y ago
30 6aab6f0 Mrdn 2y ago const { t } = useTranslation();
31 a61ba53 Mrdn 2y ago
32 6aab6f0 Mrdn 2y ago return (
33 8d27a8d Mrdn 2y ago <Box w="full">
34 8d27a8d Mrdn 2y ago <Table orientation="vertical" zIndex="docked" >
35 8d27a8d Mrdn 2y ago <Thead zIndex="docked" position="relative" >
36 8d27a8d Mrdn 2y ago <Tr>
37 8d27a8d Mrdn 2y ago <Th
38 8d27a8d Mrdn 2y ago minW="120px"
39 8d27a8d Mrdn 2y ago pl={4}
40 8d27a8d Mrdn 2y ago pr={4}
41 8d27a8d Mrdn 2y ago cursor={'pointer'}
42 8d27a8d Mrdn 2y ago onClick={handleSort.bind(null, filters, 'tag', onInboundsFilterChange)}
43 8d27a8d Mrdn 2y ago >
44 8d27a8d Mrdn 2y ago <HStack>
45 8d27a8d Mrdn 2y ago <span>{t('inbounds')}</span>
46 8d27a8d Mrdn 2y ago </HStack>
47 8d27a8d Mrdn 2y ago </Th>
48 8d27a8d Mrdn 2y ago </Tr>
49 8d27a8d Mrdn 2y ago </Thead>
50 8d27a8d Mrdn 2y ago <Tbody>
51 8d27a8d Mrdn 2y ago {inbounds?.map((inbound, i) => {
52 8d27a8d Mrdn 2y ago const active = inbounds[i] == selectedInbound
53 8d27a8d Mrdn 2y ago return (
54 8d27a8d Mrdn 2y ago <Tr key={i}
55 8d27a8d Mrdn 2y ago className={classNames('interactive')}
56 8d27a8d Mrdn 2y ago bg={active ? 'gray.300' : undefined}
57 8d27a8d Mrdn 2y ago _dark={{ bg: active ? 'gray.700' : undefined }}
58 8d27a8d Mrdn 2y ago onClick={() => {
59 8d27a8d Mrdn 2y ago selectInbound(inbound);
60 8d27a8d Mrdn 2y ago refetchHosts();
61 8d27a8d Mrdn 2y ago }}>
62 8d27a8d Mrdn 2y ago <Td>
63 8d27a8d Mrdn 2y ago <InboundCard
64 8d27a8d Mrdn 2y ago tag={inbound.tag}
65 8d27a8d Mrdn 2y ago nodeName={inbound.node.name}
66 8d27a8d Mrdn 2y ago protocol={inbound.protocol}
67 8d27a8d Mrdn 2y ago />
68 8d27a8d Mrdn 2y ago </Td>
69 8d27a8d Mrdn 2y ago </Tr>);
70 8d27a8d Mrdn 2y ago })}
71 8d27a8d Mrdn 2y ago </Tbody>
72 8d27a8d Mrdn 2y ago </Table>
73 8d27a8d Mrdn 2y ago </Box>
74 6aab6f0 Mrdn 2y ago )
75 6aab6f0 Mrdn 2y ago }