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