1import { Badge, Text } from '@chakra-ui/react';
 2
 3import { statusColors } from 'constants/Settings';
 4import { FC } from 'react';
 5import { useTranslation } from 'react-i18next';
 6import { Status as StatusType } from 'types';
 7import { relativeExpiryDate } from 'utils/dateFormatter';
 8
 9type StatusProps = {
10  expiryDate?: number | null;
11  status: StatusType;
12  compact?: boolean;
13  showDetail?: boolean;
14  extraText?: string | null;
15};
16export const StatusBadge: FC<StatusProps> = ({
17  expiryDate,
18  status,
19  compact = false,
20  showDetail = true,
21  extraText,
22}) => {
23  const { t } = useTranslation();
24  const dateInfo = relativeExpiryDate(expiryDate);
25  const Icon = statusColors[status].icon;
26  return (
27    <>
28      <Badge
29        colorScheme={statusColors[status].statusColor}
30        rounded="full"
31        display="inline-flex"
32        px={3}
33        py={1}
34        columnGap={compact ? 1 : 2}
35        alignItems="center"
36      >
37        <Icon w={compact ? 3 : 4} />
38        {showDetail && (
39          <Text
40            textTransform="capitalize"
41            fontSize={compact ? '.7rem' : '.875rem'}
42            lineHeight={compact ? '1rem' : '1.25rem'}
43            fontWeight="medium"
44            letterSpacing="tighter"
45          >
46            {status}
47            {extraText && `: ${extraText}`}
48          </Text>
49        )}
50      </Badge>
51      {showDetail && expiryDate && (
52        <Text
53          display="inline-block"
54          fontSize="xs"
55          fontWeight="medium"
56          ml="2"
57          color="gray.600"
58          _dark={{
59            color: 'gray.400',
60          }}
61        >
62          {t(dateInfo.status, { time: dateInfo.time })}
63        </Text>
64      )}
65    </>
66  );
67};