@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 |
|
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 |
|
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>
)
}
