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