@chakra-ui/react#WrapItem JavaScript Examples

The following examples show how to use @chakra-ui/react#WrapItem. 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 4 votes vote down vote up
export function FlipCard({flipService, onDelete}) {
  const {t} = useTranslation()

  const [current, send] = useService(flipService)
  const {id, keywords, originalOrder, images, type, createdAt} = current.context

  const {colors} = useTheme()

  const isActionable = [
    FlipType.Published,
    FlipType.Draft,
    FlipType.Archived,
    FlipType.Invalid,
  ].includes(type)
  const isSubmittable = [FlipType.Draft, FlipType.Invalid].includes(type)
  const isViewable = [FlipType.Published, FlipType.Archived].includes(type)
  const isEditable = [FlipType.Draft, FlipType.Invalid].includes(type)
  const isDeletable = [FlipType.Published, FlipType.Draft].includes(type)

  return (
    <WrapItem w={150}>
      <Box position="relative">
        <FlipCardImageBox>
          {[FlipType.Publishing, FlipType.Deleting, FlipType.Invalid].some(
            x => x === type
          ) && (
            <FlipOverlay
              backgroundImage={
                // eslint-disable-next-line no-nested-ternary
                [FlipType.Publishing, FlipType.Deleting].some(x => x === type)
                  ? `linear-gradient(to top, ${
                      colors.warning[500]
                    }, ${transparentize(100, colors.warning[500])})`
                  : type === FlipType.Invalid
                  ? `linear-gradient(to top, ${
                      colors.red[500]
                    }, ${transparentize(100, colors.red[500])})`
                  : ''
              }
            >
              <FlipOverlayStatus>
                <InfoSolidIcon boxSize={5} />
                <FlipOverlayText>
                  {type === FlipType.Publishing && t('Mining...')}
                  {type === FlipType.Deleting && t('Deleting...')}
                  {type === FlipType.Invalid && t('Mining error')}
                </FlipOverlayText>
              </FlipOverlayStatus>
            </FlipOverlay>
          )}
          <FlipCardImage src={images[originalOrder ? originalOrder[0] : 0]} />
        </FlipCardImageBox>
        <Flex justifyContent="space-between" alignItems="flex-start" mt={4}>
          <Box>
            <FlipCardTitle>
              {keywords.words && keywords.words.length
                ? formatKeywords(keywords.words)
                : t('Missing keywords')}
            </FlipCardTitle>
            <FlipCardSubtitle>
              {new Date(createdAt).toLocaleString()}
            </FlipCardSubtitle>
          </Box>
          {isActionable && (
            <FlipCardMenu>
              {isSubmittable && (
                <FlipCardMenuItem onClick={() => send('PUBLISH', {id})}>
                  <UploadIcon boxSize={5} mr={2} color="blue.500" />
                  {t('Submit flip')}
                </FlipCardMenuItem>
              )}
              {isViewable && (
                <FlipCardMenuItem>
                  <NextLink href={`/flips/view?id=${id}`}>
                    <Flex>
                      <ViewIcon boxSize={5} mr={2} color="blue.500" />
                      {t('View flip')}
                    </Flex>
                  </NextLink>
                </FlipCardMenuItem>
              )}
              {isEditable && (
                <FlipCardMenuItem>
                  <NextLink href={`/flips/edit?id=${id}`}>
                    <Flex>
                      <EditIcon boxSize={5} mr={2} color="blue.500" />
                      {t('Edit flip')}
                    </Flex>
                  </NextLink>
                </FlipCardMenuItem>
              )}
              {(isSubmittable || isEditable) && isDeletable && (
                <MenuDivider color="gray.100" my={2} width={rem(145)} />
              )}

              {isDeletable && (
                <FlipCardMenuItem onClick={onDelete}>
                  <DeleteIcon boxSize={5} mr={2} color="red.500" />
                  {t('Delete flip')}
                </FlipCardMenuItem>
              )}
            </FlipCardMenu>
          )}
        </Flex>
      </Box>
    </WrapItem>
  )
}
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>
  )
}