1import { Table, Thead, Tbody, Th, Td, Tr, HStack } from '@chakra-ui/react';
 2import classNames from 'classnames';
 3import { InboundCard } from 'components/inbounds-card';
 4import { handleSort } from 'components/table';
 5import { FC } from 'react';
 6import { useTranslation } from 'react-i18next';
 7import { useInbounds } from 'stores';
 8import { InboundType } from 'types';
 9
10type InboundsSidebarProps = {
11  inbounds: InboundType[];
12}
13
14export const InboundsSidebar: FC<InboundsSidebarProps> = ({
15  inbounds,
16}) => {
17  const {
18    onInboundsFilterChange,
19    inboundsFilters: filters,
20    selectedInbound,
21    selectInbound,
22    refetchHosts,
23  } = useInbounds();
24
25
26  const { t } = useTranslation();
27
28  return (
29    <Table orientation="vertical" zIndex="docked" pr="3" >
30      <Thead zIndex="docked" position="relative">
31        <Tr>
32          <Th
33            minW="120px"
34            pl={4}
35            pr={4}
36            cursor={'pointer'}
37            onClick={handleSort.bind(null, filters, 'tag', onInboundsFilterChange)}
38          >
39            <HStack>
40              <span>{t('inbounds')}</span>
41            </HStack>
42          </Th>
43        </Tr>
44      </Thead>
45      <Tbody>
46        {inbounds?.map((inbound, i) => {
47          const active = inbounds[i] == selectedInbound
48          return (
49            <Tr key={i}
50              className={classNames('interactive')}
51              bg={active ? 'gray.300' : undefined}
52              _dark={{ bg: active ? 'gray.700' : undefined }}
53              onClick={() => {
54                selectInbound(inbound);
55                refetchHosts();
56              }}>
57              <Td>
58                <InboundCard
59                  tag={inbound.tag}
60                  nodeName={inbound.node.name}
61                  protocol={inbound.protocol}
62                />
63              </Td>
64            </Tr>);
65        })}
66      </Tbody>
67    </Table>
68  )
69}