@chakra-ui/react#Wrap JavaScript Examples

The following examples show how to use @chakra-ui/react#Wrap. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: components.js    From idena-web with MIT License 5 votes vote down vote up 
export function FlipCardList(props) {
  return <Wrap spacing={10} {...props} />
}
Example #2
Source File: components.js    From idena-web with MIT License 4 votes vote down vote up 
export function ProfileTagList() {
  const {t} = useTranslation()

  const [
    {age, penalty, totalShortFlipPoints, totalQualifiedFlips},
  ] = useIdentity()

  const epoch = useEpoch()

  const score = useTotalValidationScore()

  const inviteScore = useInviteScore()

  const formatDna = useFormatDna({maximumFractionDigits: 5})

  const [isMobile] = useMediaQuery('(max-width: 480px)')

  const hasAnyTag =
    age > 0 || penalty > 0 || Number.isFinite(score) || inviteScore > 0

  return (
    <Wrap
      spacing={[0, '1']}
      direction={['column', 'row']}
      w={['full']}
      mt={[hasAnyTag ? 4 : 0, 0]}
      mb={[hasAnyTag ? 3 : 0, 0]}
    >
      {age > 0 && (
        <WrapItem>
          <SimpleProfileTag label={t('Age')} value={age} />
        </WrapItem>
      )}

      {Number.isFinite(score) && (
        <WrapItem>
          {isMobile ? (
            <ProfileTag>
              <Flex align="center" justify="space-between">
                <ProfileTagLabel>{t('Score')}</ProfileTagLabel>
                <TextLink href="/validation-report" display="inline-flex">
                  {t('Validation report')}
                </TextLink>
              </Flex>
              <ProfileTagValue>{toPercent(score)}</ProfileTagValue>
            </ProfileTag>
          ) : (
            <Popover placement="top" arrowShadowColor="transparent">
              <PopoverTrigger>
                <Box>
                  <SimpleProfileTag
                    label={t('Score')}
                    value={toPercent(score)}
                    cursor="help"
                  />
                </Box>
              </PopoverTrigger>
              <PopoverContent border="none" fontSize="sm" w="max-content">
                <PopoverArrow bg="graphite.500" />
                <PopoverBody bg="graphite.500" borderRadius="sm" p="2" pt="1">
                  <Stack>
                    <Stack spacing="0.5">
                      <Text color="muted" lineHeight="shorter">
                        {t('Total score')}
                      </Text>
                      <Text color="white" lineHeight="4">
                        {t(
                          `{{totalShortFlipPoints}} out of {{totalQualifiedFlips}}`,
                          {
                            totalShortFlipPoints,
                            totalQualifiedFlips,
                          }
                        )}
                      </Text>
                    </Stack>
                    <Stack spacing="0.5">
                      <Text color="muted" lineHeight="shorter">
                        {t('Epoch #{{epoch}}', {epoch: epoch?.epoch})}
                      </Text>
                      <TextLink
                        href="/validation-report"
                        color="white"
                        lineHeight="4"
                      >
                        {t('Validation report')}
                        <ChevronRightIcon />
                      </TextLink>
                    </Stack>
                  </Stack>
                </PopoverBody>
              </PopoverContent>
            </Popover>
          )}
        </WrapItem>
      )}

      {penalty > 0 && (
        <WrapItem>
          <ProfileTag bg={[null, 'red.012']}>
            <ProfileTagLabel color="red.500">
              {t('Mining penalty')}
            </ProfileTagLabel>
            <ProfileTagValue color="red.500">
              {formatDna(penalty)}
            </ProfileTagValue>
          </ProfileTag>
        </WrapItem>
      )}

      {inviteScore && (
        <WrapItem>
          {isMobile ? (
            <ProfileTag>
              <Flex align="center" justify="space-between">
                <ProfileTagLabel>{t('Invitation rewards')}</ProfileTagLabel>
                <TextLink href="/contacts" display="inline-flex">
                  {t('Check invites')}
                </TextLink>
              </Flex>
              <ProfileTagValue>{toPercent(inviteScore)}</ProfileTagValue>
            </ProfileTag>
          ) : (
            <ProfileTagPopover>
              <ProfileTagPopoverTrigger>
                <ProfileTag
                  cursor="help"
                  bg={
                    // eslint-disable-next-line no-nested-ternary
                    inviteScore < 0.75
                      ? 'red.010'
                      : inviteScore < 0.99
                      ? 'orange.010'
                      : 'green.010'
                  }
                  color={
                    // eslint-disable-next-line no-nested-ternary
                    inviteScore < 0.75
                      ? 'red.500'
                      : inviteScore < 0.99
                      ? 'orange.500'
                      : 'green.500'
                  }
                >
                  <ProfileTagLabel>{t('Invitation rewards')}</ProfileTagLabel>
                  <ProfileTagValue>{toPercent(inviteScore)}</ProfileTagValue>
                </ProfileTag>
              </ProfileTagPopoverTrigger>
              <ProfileTagPopoverContent>
                <Stack spacing="2px" w={40}>
                  <Text color="xwhite.040" lineHeight="base">
                    {t(
                      'You will get {{invitationRewardRatio}} of the invitation rewards if your invite is activated now',
                      {invitationRewardRatio: toPercent(inviteScore)}
                    )}
                  </Text>
                  <TextLink href="/contacts" color="white" lineHeight="base">
                    {t('Check invites')}
                    <ChevronRightIcon />
                  </TextLink>
                </Stack>
              </ProfileTagPopoverContent>
            </ProfileTagPopover>
          )}
        </WrapItem>
      )}
    </Wrap>
  )
}