gitscope
/
← marzneshin / app/dashboard/src/components/inbounds-card/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/components/inbounds-card/index.tsx · v0.1.0
Source
1 2ae554f Mardin 2y ago /* Inbounds Card Component
2 2ae554f Mardin 2y ago *
3 2ae554f Mardin 2y ago * - name
4 2ae554f Mardin 2y ago * - protocol
5 2ae554f Mardin 2y ago * - Nodes number
6 2ae554f Mardin 2y ago */
7 2ae554f Mardin 2y ago
8 2ae554f Mardin 2y ago import { FC, PropsWithChildren } from 'react'
9 2ae554f Mardin 2y ago import { ProtocolType } from 'types'
10 2ae554f Mardin 2y ago import { Text, Spacer, VStack, chakra, Flex } from '@chakra-ui/react';
11 2ae554f Mardin 2y ago import { IconBaseStyle } from 'constants/IconBaseStyle';
12 2ae554f Mardin 2y ago import { ServerStackIcon } from '@heroicons/react/24/outline';
13 2ae554f Mardin 2y ago import { SystemPropertyStatus } from 'components/system-property-status';
14 2ae554f Mardin 2y ago
15 2ae554f Mardin 2y ago type InboundCardProps = {
16 2ae554f Mardin 2y ago tag: string,
17 2ae554f Mardin 2y ago protocol: ProtocolType,
18 2ae554f Mardin 2y ago nodeName: string;
19 2ae554f Mardin 2y ago }
20 2ae554f Mardin 2y ago
21 2ae554f Mardin 2y ago const InboundsIcon = chakra(ServerStackIcon, IconBaseStyle);
22 2ae554f Mardin 2y ago
23 2ae554f Mardin 2y ago export const BadgeTag: FC<PropsWithChildren> = ({ children }) => {
24 2ae554f Mardin 2y ago return (
25 6aab6f0 Mrdn 2y ago <Text fontSize="sm" color="primary.700" _dark={{ color: 'gray.100', bg: 'primary.700' }} bg="gray.100" pl="3px" pr="3px" border="1px" borderRadius="md" borderColor="primary.700" fontWeight="light">
26 2ae554f Mardin 2y ago {children}
27 2ae554f Mardin 2y ago </Text>
28 2ae554f Mardin 2y ago )
29 2ae554f Mardin 2y ago }
30 2ae554f Mardin 2y ago
31 2ae554f Mardin 2y ago export const InboundCard: FC<InboundCardProps> = ({ tag, protocol, nodeName }) => {
32 2ae554f Mardin 2y ago return (
33 2ae554f Mardin 2y ago <VStack justifyContent={'start'} alignItems={'start'} w="full">
34 2ae554f Mardin 2y ago <Text fontSize="md" color="gray.700" _dark={{ color: 'gray.100' }} fontWeight="semibold">
35 2ae554f Mardin 2y ago {tag}
36 2ae554f Mardin 2y ago </Text>
37 2ae554f Mardin 2y ago <Flex justifyContent={'spaced-between'} flexDir="row" w="full">
38 2ae554f Mardin 2y ago <SystemPropertyStatus value={nodeName} StatusIcon={InboundsIcon} />
39 2ae554f Mardin 2y ago <Spacer />
40 2ae554f Mardin 2y ago <BadgeTag>
41 2ae554f Mardin 2y ago {protocol}
42 2ae554f Mardin 2y ago </BadgeTag>
43 2ae554f Mardin 2y ago </Flex>
44 2ae554f Mardin 2y ago </VStack >
45 2ae554f Mardin 2y ago )
46 2ae554f Mardin 2y ago }