AdminDomainCard.js

import React from 'react'
import { t } from "@lingui/core/macro"
import { Trans } from "@lingui/react/macro"
import { any, array, bool, object, string } from 'prop-types'
import { Flex, ListItem, Tag, TagLabel, Text, Tooltip } from '@chakra-ui/react'

export function AdminDomainCard({ url, tags, assetState, isArchived, rcode, cvdEnrollment, highAvailability, children, ...rest }) {
  const assetStateLabels = {
    APPROVED: t`Approved`,
    DEPENDENCY: t`Dependency`,
    MONITOR_ONLY: t`Monitor Only`,
    CANDIDATE: t`Candidate`,
    REQUIRES_INVESTIGATION: t`Requires Investigation`,
  }

  return (
    <ListItem {...rest}>
      <Flex px="2" py="3" align="center" rounded="md" mb="2" borderColor="black" borderWidth="1px">
        {children}
        <Text minWidth="35%" fontWeight="bold" fontSize="lg" mr="2">
          {url}
        </Text>
        <Flex>
          {tags?.map(({ label, description }, idx) => {
            return (
              <Tag key={idx} mr="1" bg="gray.50" borderWidth="1px" borderColor="gray.900">
                <Tooltip label={description} fontSize="md" placement="top">
                  <TagLabel textColor="primary" fontWeight="bold" mx="auto">
                    {label.toUpperCase()}
                  </TagLabel>
                </Tooltip>
              </Tag>
            )
          })}
        </Flex>
        <Flex ml="auto">
          {assetState && (
            <Tag colorScheme="blue" mx="1">
              <TagLabel fontWeight="bold">{assetStateLabels[assetState]}</TagLabel>
            </Tag>
          )}
          {cvdEnrollment && cvdEnrollment.status !== 'NOT_ENROLLED' && (
            <Tag colorScheme="blue" mx="1">
              <TagLabel fontWeight="bold">
                <Trans>CVD {cvdEnrollment.status}</Trans>
              </TagLabel>
            </Tag>
          )}
          {highAvailability && (
            <Tag colorScheme="green" mx="1">
              <TagLabel fontWeight="bold">
                <Trans>HIGH AVAILABILITY</Trans>
              </TagLabel>
            </Tag>
          )}
          {rcode === 'NXDOMAIN' && (
            <Tag colorScheme="red" mr="auto" alignSelf="center">
              <TagLabel fontWeight="bold">NXDOMAIN</TagLabel>
            </Tag>
          )}
          {isArchived && (
            <Tag colorScheme="red" mx="1">
              <TagLabel fontWeight="bold">
                <Trans>ARCHIVED</Trans>
              </TagLabel>
            </Tag>
          )}
        </Flex>
      </Flex>
    </ListItem>
  )
}
AdminDomainCard.propTypes = {
  url: string,
  tags: array,
  isArchived: bool,
  rcode: string,
  assetState: string,
  children: any,
  cvdEnrollment: object,
  highAvailability: bool,
}