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.0
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 { useEffect } from 'react';
6 6aab6f0 Mrdn 2y ago import { useTranslation } from 'react-i18next';
7 6aab6f0 Mrdn 2y ago import { 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 inbounds,
12 6aab6f0 Mrdn 2y ago onInboundsFilterChange,
13 6aab6f0 Mrdn 2y ago inboundsFilters: filters,
14 6aab6f0 Mrdn 2y ago selectedInbound,
15 6aab6f0 Mrdn 2y ago selectInbound,
16 6aab6f0 Mrdn 2y ago refetchInbounds
17 6aab6f0 Mrdn 2y ago } = useInbounds();
18 6aab6f0 Mrdn 2y ago const { t } = useTranslation();
19 6aab6f0 Mrdn 2y ago useEffect(() => {
20 6aab6f0 Mrdn 2y ago inbounds.length === 0 && refetchInbounds();
21 6aab6f0 Mrdn 2y ago }, [inbounds.length])
22 6aab6f0 Mrdn 2y ago return (
23 6aab6f0 Mrdn 2y ago <Table orientation="vertical" zIndex="docked" pr="3" >
24 6aab6f0 Mrdn 2y ago <Thead zIndex="docked" position="relative">
25 6aab6f0 Mrdn 2y ago <Tr>
26 6aab6f0 Mrdn 2y ago <Th
27 6aab6f0 Mrdn 2y ago minW="120px"
28 6aab6f0 Mrdn 2y ago pl={4}
29 6aab6f0 Mrdn 2y ago pr={4}
30 6aab6f0 Mrdn 2y ago cursor={'pointer'}
31 6aab6f0 Mrdn 2y ago onClick={handleSort.bind(null, filters, 'tag', onInboundsFilterChange)}
32 6aab6f0 Mrdn 2y ago >
33 6aab6f0 Mrdn 2y ago <HStack>
34 6aab6f0 Mrdn 2y ago <span>{t('inbounds')}</span>
35 6aab6f0 Mrdn 2y ago </HStack>
36 6aab6f0 Mrdn 2y ago </Th>
37 6aab6f0 Mrdn 2y ago </Tr>
38 6aab6f0 Mrdn 2y ago </Thead>
39 6aab6f0 Mrdn 2y ago <Tbody>
40 6aab6f0 Mrdn 2y ago {inbounds.map((inbound, i) => {
41 6aab6f0 Mrdn 2y ago const active = inbounds[i] == selectedInbound
42 6aab6f0 Mrdn 2y ago return (
43 6aab6f0 Mrdn 2y ago <Tr key={i}
44 6aab6f0 Mrdn 2y ago className={classNames('interactive')}
45 6aab6f0 Mrdn 2y ago bg={active ? 'gray.300' : undefined}
46 6aab6f0 Mrdn 2y ago _dark={{ bg: active ? 'gray.700' : undefined }}
47 6aab6f0 Mrdn 2y ago onClick={() => { selectInbound(inbound) }}>
48 6aab6f0 Mrdn 2y ago <Td>
49 6aab6f0 Mrdn 2y ago <InboundCard
50 6aab6f0 Mrdn 2y ago
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 }