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