1/* Inbounds Card Component
 2 * 
 3 * - name
 4 * - protocol
 5 * - Nodes number
 6*/
 7
 8import { FC, PropsWithChildren } from 'react'
 9import { ProtocolType } from 'types'
10import { Text, Spacer, VStack, chakra, Flex } from '@chakra-ui/react';
11import { IconBaseStyle } from 'constants/IconBaseStyle';
12import { ServerStackIcon } from '@heroicons/react/24/outline';
13import { SystemPropertyStatus } from 'components/system-property-status';
14
15type InboundCardProps = {
16  tag: string,
17  protocol: ProtocolType,
18  nodeName: string;
19}
20
21const InboundsIcon = chakra(ServerStackIcon, IconBaseStyle);
22
23export const BadgeTag: FC<PropsWithChildren> = ({ children }) => {
24  return (
25    <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      {children}
27    </Text>
28  )
29}
30
31export const InboundCard: FC<InboundCardProps> = ({ tag, protocol, nodeName }) => {
32  return (
33    <VStack justifyContent={'start'} alignItems={'start'} w="full">
34      <Text fontSize="md" color="gray.700" _dark={{ color: 'gray.100' }} fontWeight="semibold">
35        {tag}
36      </Text>
37      <Flex justifyContent={'spaced-between'} flexDir="row" w="full">
38        <SystemPropertyStatus value={nodeName} StatusIcon={InboundsIcon} />
39        <Spacer />
40        <BadgeTag>
41          {protocol}
42        </BadgeTag>
43      </Flex>
44    </VStack >
45  )
46}