@chakra-ui/react#MenuDivider JavaScript Examples
The following examples show how to use
@chakra-ui/react#MenuDivider.
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: ProfileMenu.js From react-sample-projects with MIT License | 6 votes |
|
ProfileMenu = () => {
return (
<Menu>
<MenuButton
as={Button}
rounded={'full'}
variant={'link'}
cursor={'pointer'}
aria-label="Profile"
>
<Avatar
size={'sm'}
src={
'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9'
}
alt="user"
/>
</MenuButton>
<MenuList>
<MenuItem>Link 1</MenuItem>
<MenuItem>Link 2</MenuItem>
<MenuDivider />
<MenuItem>Link 3</MenuItem>
</MenuList>
</Menu>
);
}
Example #2
| Source File: containers.js From idena-web with MIT License | 4 votes |
|
export function AdListItem({
ad,
onReview,
onPublish,
onBurn,
onRemove,
onPreview,
}) {
const {id, cid, title, language, age, os, stake, status, contract} = ad
const {t, i18n} = useTranslation()
const formatDna = useFormatDna()
const competingAds = useCompetingAds(
cid,
new AdTarget({language, age, os, stake})
)
const competitorCount = competingAds?.length
const maxCompetitor = competingAds?.sort((a, b) => b.amount - a.amount)[0]
const {data: burntCoins} = useBurntCoins()
const orderedBurntCoins =
burntCoins
?.sort((a, b) => b.amount - a.amount)
.map(burn => ({...burn, ...AdBurnKey.fromHex(burn?.key)})) ?? []
const burnIndex = orderedBurntCoins.findIndex(burn => burn.cid === cid)
const burnAmount = orderedBurntCoins[burnIndex]
const rotationStatus =
burnIndex > -1 ? AdRotationStatus.Showing : AdRotationStatus.NotShowing
const eitherStatus = (...statuses) => statuses.includes(status)
return (
<HStack key={id} spacing="5" align="flex-start">
<Stack spacing="2" w="60px" flexShrink={0}>
<Box position="relative">
<AdImage src={adImageThumbSrc(ad)} />
{status === AdStatus.Published && (
<AdOverlayStatus status={rotationStatus} />
)}
</Box>
{status === AdStatus.Published && (
<AdStatusText status={rotationStatus} />
)}
</Stack>
<Stack spacing="5" w="full">
<Flex justify="space-between">
<Stack spacing="1">
{eitherStatus(
AdStatus.Reviewing,
AdStatus.Approved,
AdStatus.Published
) ? (
<Text
color="gray.500"
fontSize="mdx"
fontWeight={500}
lineHeight="shorter"
>
{title}
</Text>
) : (
<TextLink
href={`/adn/edit?id=${id}`}
color="gray.500"
fontSize="mdx"
fontWeight={500}
lineHeight="shorter"
_hover={{color: 'muted'}}
>
{title}
</TextLink>
)}
<Text color="muted">{ad.desc}</Text>
</Stack>
<Stack isInline align="center">
<Box>
<Menu>
<MenuItem
icon={<ViewIcon boxSize={5} color="blue.500" />}
onClick={onPreview}
>
{t('Preview')}
</MenuItem>
{eitherStatus(AdStatus.Draft, AdStatus.Rejected) && (
<NextLink href={`/adn/edit?id=${id}`} passHref>
<MenuItem icon={<EditIcon boxSize={5} color="blue.500" />}>
{t('Edit')}
</MenuItem>
</NextLink>
)}
<MenuDivider />
<MenuItem
icon={<DeleteIcon boxSize={5} />}
color="red.500"
onClick={() => {
// eslint-disable-next-line no-unused-expressions
onRemove?.(ad)
}}
>
{t('Delete')}
</MenuItem>
</Menu>
</Box>
{status === AdStatus.Published && (
<SecondaryButton onClick={onBurn}>{t('Burn')}</SecondaryButton>
)}
{status === AdStatus.Approved && (
<SecondaryButton onClick={onPublish}>
{t('Create campaign')}
</SecondaryButton>
)}
{status === AdStatus.Draft && (
<SecondaryButton onClick={onReview}>
{t('Review')}
</SecondaryButton>
)}
{eitherStatus(AdStatus.Reviewing, AdStatus.Rejected) && (
<NextLink href={viewVotingHref(contract)}>
<SecondaryButton>{t('View voting')}</SecondaryButton>
</NextLink>
)}
</Stack>
</Flex>
<HStack
align="flex-start"
spacing={4}
bg="gray.50"
px="4"
py="3"
mt="5"
rounded="md"
>
<HStack flex={1} alignSelf="center">
<InlineAdStatGroup spacing="1.5" labelWidth="16" flex={1}>
<InlineAdStat label={t('Language')} value={language} />
<InlineAdStat label={t('Min stake')} value={stake} />
</InlineAdStatGroup>
<InlineAdStatGroup spacing="1.5" labelWidth="14" flex={1}>
<InlineAdStat label={t('Min age')} value={age} />
<InlineAdStat label={t('OS')} value={os} />
</InlineAdStatGroup>
</HStack>
<VDivider minH={68} h="full" />
<Stack flex={1} justify="center">
{status === AdStatus.Published && (
<InlineAdStatGroup spacing="2" labelWidth="28" flex={1}>
<SmallInlineAdStat
label={t('Burnt, {{time}}', {
time: new Intl.RelativeTimeFormat(i18n.language, {
style: 'short',
}).format(24, 'hour'),
})}
value={burnAmount ? formatDna(burnAmount.amount) : '--'}
flex={0}
/>
<SmallInlineAdStat
label="Competitors"
value={String(competitorCount)}
flex={0}
/>
<SmallInlineAdStat
label="Max bid"
value={maxCompetitor ? formatDna(maxCompetitor.amount) : '--'}
/>
</InlineAdStatGroup>
)}
</Stack>
</HStack>
</Stack>
</HStack>
)
}
Example #3
| 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>
)
}
