1
  2import { InfoIcon } from './icons';
  3import {
  4  Badge,
  5  Box,
  6  Popover,
  7  PopoverArrow,
  8  PopoverBody,
  9  PopoverCloseButton,
 10  PopoverContent,
 11  PopoverTrigger,
 12  Portal,
 13  Text,
 14} from '@chakra-ui/react';
 15import { useTranslation } from 'react-i18next';
 16import 'slick-carousel/slick/slick-theme.css';
 17import 'slick-carousel/slick/slick.css';
 18
 19export const RemarkFieldPopover = () => {
 20  const { t } = useTranslation();
 21  return (
 22    <Popover isLazy placement="right">
 23      <PopoverTrigger>
 24        <Box mt="-8px">
 25          <InfoIcon />
 26        </Box>
 27      </PopoverTrigger>
 28      <Portal>
 29        <PopoverContent>
 30          <PopoverArrow />
 31          <PopoverCloseButton />
 32          <PopoverBody>
 33            <Box fontSize="xs">
 34              <Text pr="20px">{t('hostsDialog.desc')}</Text>
 35              <Text>
 36                <Badge>
 37                  {'{'}SERVER_IP{'}'}
 38                </Badge>{' '}
 39                {t('hostsDialog.currentServer')}
 40              </Text>
 41              <Text mt={1}>
 42                <Badge>
 43                  {'{'}USERNAME{'}'}
 44                </Badge>{' '}
 45                {t('hostsDialog.username')}
 46              </Text>
 47              <Text mt={1}>
 48                <Badge>
 49                  {'{'}DATA_USAGE{'}'}
 50                </Badge>{' '}
 51                {t('hostsDialog.dataUsage')}
 52              </Text>
 53              <Text mt={1}>
 54                <Badge>
 55                  {'{'}DATA_LEFT{'}'}
 56                </Badge>{' '}
 57                {t('hostsDialog.remainingData')}
 58              </Text>
 59              <Text mt={1}>
 60                <Badge>
 61                  {'{'}DATA_LIMIT{'}'}
 62                </Badge>{' '}
 63                {t('hostsDialog.dataLimit')}
 64              </Text>
 65              <Text mt={1}>
 66                <Badge>
 67                  {'{'}DAYS_LEFT{'}'}
 68                </Badge>{' '}
 69                {t('hostsDialog.remainingDays')}
 70              </Text>
 71              <Text mt={1}>
 72                <Badge>
 73                  {'{'}EXPIRE_DATE{'}'}
 74                </Badge>{' '}
 75                {t('hostsDialog.expireDate')}
 76              </Text>
 77              <Text mt={1}>
 78                <Badge>
 79                  {'{'}JALALI_EXPIRE_DATE{'}'}
 80                </Badge>{' '}
 81                {t('hostsDialog.jalaliExpireDate')}
 82              </Text>
 83              <Text mt={1}>
 84                <Badge>
 85                  {'{'}TIME_LEFT{'}'}
 86                </Badge>{' '}
 87                {t('hostsDialog.remainingTime')}
 88              </Text>
 89              <Text mt={1}>
 90                <Badge>
 91                  {'{'}STATUS_EMOJI{'}'}
 92                </Badge>{' '}
 93                {t('hostsDialog.statusEmoji')}
 94              </Text>
 95              <Text mt={1}>
 96                <Badge>
 97                  {'{'}PROTOCOL{'}'}
 98                </Badge>{' '}
 99                {t('hostsDialog.proxyProtocol')}
100              </Text>
101              <Text mt={1}>
102                <Badge>
103                  {'{'}TRANSPORT{'}'}
104                </Badge>{' '}
105                {t('hostsDialog.proxyMethod')}
106              </Text>
107            </Box>
108          </PopoverBody>
109        </PopoverContent>
110      </Portal>
111    </Popover>
112  );
113}