@chakra-ui/react#PopoverHeader JavaScript Examples
The following examples show how to use
@chakra-ui/react#PopoverHeader.
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: onboarding.js From idena-web with MIT License | 5 votes |
|
export function OnboardingPopoverContent({
title,
additionFooterActions,
children,
onDismiss,
...props
}) {
const {t} = useTranslation()
return (
<PopoverContent
bg="blue.500"
border="none"
color="white"
px={3}
py={2}
zIndex="popover"
{...props}
>
<PopoverArrow bg="blue.500" boxShadow="none !important" />
<Box p={2}>
<Stack spacing={3}>
<PopoverHeader
borderBottom="none"
fontWeight={500}
fontSize="md"
p={0}
mb={0}
>
{title}
</PopoverHeader>
<PopoverBody fontSize="sm" p={0}>
{children}
</PopoverBody>
<PopoverFooter as={Stack} border="none" p={0}>
<Stack isInline spacing={6} justify="flex-end">
{additionFooterActions}
<Button variant="unstyled" onClick={onDismiss}>
{t('Okay, got it')}
</Button>
</Stack>
</PopoverFooter>
</Stack>
</Box>
</PopoverContent>
)
}
Example #2
| Source File: Popover.js From blobs.app with MIT License | 5 votes |
|
Popover = ({ props, children, label, trigger }) => {
const [isOpen, setIsOpen] = useState(false);
const open = () => setIsOpen(!isOpen);
const close = () => setIsOpen(false);
return (
<ChakPopover
autoFocus={false}
isLazy
placement="top"
arrowSize="0"
isOpen={isOpen}
onClose={close}
>
<PopoverTrigger>
<Box onClick={open}>
{!!trigger && <Box>{trigger}</Box>}
{!trigger && (
<Box>
<Tooltip
label={label}
aria-label={label}
hasArrow
variant="default"
>
<Box
as="button"
p="15px"
_focus={{ outline: 0 }}
_hover={{ boxShadow: 'xl' }}
rounded="2xl"
{...props}
/>
</Tooltip>
</Box>
)}
</Box>
</PopoverTrigger>
<PopoverContent
bg="gray.50"
shadow="2xl"
_dark={{ bg: 'gray.700' }}
_focus={{ boxShadow: 'none', outline: 'none' }}
>
<PopoverArrow />
<PopoverCloseButton mt="6px" />
<PopoverHeader py="3">
<Heading
fontSize="md"
letterSpacing="-0.9px"
textAlign="center"
fontWeight="700"
variant="main"
>
{label}
</Heading>
</PopoverHeader>
<PopoverBody p="0">
{typeof children === 'function' ? children(close) : children}
</PopoverBody>
</PopoverContent>
</ChakPopover>
);
}
Example #3
| Source File: containers.js From idena-web with MIT License | 4 votes |
|
export function VotingPhase({service}) {
const {t} = useTranslation()
const [current] = useActor(service)
const {
createDate,
startDate,
finishDate,
finishCountingDate,
votes = [],
votesCount,
voteProofsCount,
winnerThreshold,
quorum,
committeeSize,
estimatedTerminationTime,
finishTime,
terminationTime,
} = current.context
const eitherIdleState = (...states) =>
eitherState(current, ...states.map(s => `idle.${s}`.toLowerCase()))
const didDetermineWinner = hasWinner({
votes,
votesCount: voteProofsCount,
winnerThreshold,
quorum,
committeeSize,
finishCountingDate,
})
const didReachQuorum = hasQuorum({votesCount, quorum, committeeSize})
// eslint-disable-next-line no-nested-ternary
const [nextPhaseLabel, nextPhaseDate] = eitherIdleState(
VotingStatus.Deploying,
VotingStatus.Pending,
VotingStatus.Starting
)
? [t('Start voting'), startDate]
: // eslint-disable-next-line no-nested-ternary
eitherIdleState(VotingStatus.Open, VotingStatus.Voting, VotingStatus.Voted)
? [t('End voting'), finishDate]
: // eslint-disable-next-line no-nested-ternary
eitherIdleState(
VotingStatus.Counting,
VotingStatus.Prolonging,
VotingStatus.Finishing
)
? // eslint-disable-next-line no-nested-ternary
dayjs().isBefore(finishCountingDate)
? [
didDetermineWinner
? t('Waiting for rewards distribution')
: t('End counting'),
finishCountingDate,
]
: didReachQuorum
? [
// eslint-disable-next-line no-nested-ternary
didDetermineWinner
? isAllowedToTerminate({estimatedTerminationTime})
? t('Waiting for rewards distribution or termination')
: t('Waiting for rewards distribution')
: isAllowedToTerminate({estimatedTerminationTime})
? t('Waiting for refunds or termination')
: t('Waiting for refunds'),
null,
]
: [
isAllowedToTerminate({estimatedTerminationTime})
? t('Waiting for prolongation or termination')
: t('Waiting for prolongation'),
null,
]
: // eslint-disable-next-line no-nested-ternary
eitherIdleState(VotingStatus.Archived, VotingStatus.Terminating)
? [t('Waiting for termination'), finishTime]
: eitherIdleState(VotingStatus.Terminated)
? [t('Terminated'), terminationTime]
: []
return (
<Flex align="center" justify="space-between">
<Box fontWeight={500}>
<Text color="muted">{nextPhaseLabel}</Text>
{nextPhaseDate && (
<Text>
{new Date(nextPhaseDate).toLocaleString()}
{eitherIdleState(
VotingStatus.Open,
VotingStatus.Voted,
VotingStatus.Counting
) && <Text as="span"> ({dayjs().to(nextPhaseDate)})</Text>}
</Text>
)}
</Box>
<Popover placement="top">
<PopoverTrigger>
<InfoButton display="inline-flex" p={0} />
</PopoverTrigger>
<PopoverContent
bg="graphite.500"
border="none"
zIndex="popover"
w="2xs"
px={4}
py={2}
pb={4}
>
<PopoverArrow bg="graphite.500" />
<PopoverHeader borderBottom="none" p={0} mb={3}>
<Text color="white" fontWeight={500}>
{t('Voting timeline')}
</Text>
</PopoverHeader>
<PopoverBody p={0}>
<Stack spacing="10px" fontSize="sm">
<VotingPhase.ListItem
isActive={false}
label={t('Created')}
value={new Date(createDate).toLocaleString()}
/>
<VotingPhase.ListItem
isActive={eitherIdleState(VotingStatus.Pending)}
label={t('Start voting')}
value={
eitherIdleState(VotingStatus.Pending)
? '--'
: new Date(startDate).toLocaleString()
}
/>
<VotingPhase.ListItem
isActive={eitherIdleState(
VotingStatus.Pending,
VotingStatus.Open,
VotingStatus.Voted
)}
label={t('End voting')}
value={
eitherIdleState(VotingStatus.Pending)
? '--'
: new Date(finishDate).toLocaleString()
}
/>
<VotingPhase.ListItem
isActive={eitherIdleState(
VotingStatus.Pending,
VotingStatus.Open,
VotingStatus.Voted,
VotingStatus.Counting
)}
label={t('End counting')}
value={
eitherIdleState(VotingStatus.Pending)
? '--'
: new Date(finishCountingDate).toLocaleString()
}
/>
</Stack>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
)
}
Example #4
| Source File: playlists.js From grandcast.fm with Apache License 2.0 | 4 votes |
|
export default function Playlists() {
const { isSignedIn } = useAuth()
const [selectedPlaylist, setSelectedPlaylist] = useState('')
const [newPlaylist, setNewPlaylist] = useState('')
const { data } = useQuery(GET_PLAYLISTS)
const [createPlaylist] = useMutation(CREATE_PLAYLIST)
const filteredPlaylist = data?.playlists?.filter((p) => {
return p.name === selectedPlaylist
})[0]
return (
<Container>
{!isSignedIn() && <SignIn />}
{isSignedIn() && (
<div>
<FormControl id="playlists">
<Flex>
<Select
placeholder="Select playlist"
onChange={(e) => setSelectedPlaylist(e.target.value)}
>
{data?.playlists?.map((p) => {
return (
<option key={p.name} value={p.value}>
{p.name}
</option>
)
})}
</Select>
<Popover>
<PopoverTrigger>
<Button ml={4}>
<AddIcon />
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Create new playlist</PopoverHeader>
<PopoverBody>
<FormControl id="newplaylist">
<Input
type="text"
onChange={(e) => setNewPlaylist(e.target.value)}
/>
<Button
mt={4}
onClick={() =>
createPlaylist({
variables: { playlistName: newPlaylist },
update: (proxy) => {
const data = proxy.readQuery({
query: GET_PLAYLISTS,
})
proxy.writeQuery({
query: GET_PLAYLISTS,
data: {
playlists: [
...data.playlists,
{
__typename: 'Playlist',
name: newPlaylist,
},
],
},
})
},
})
}
>
Create
</Button>
</FormControl>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
</FormControl>
<VStack mt={4} spacing={4}>
{filteredPlaylist?.episodes?.map((e) => {
return (
<Episode key={e.id} episode={e} playlists={data.playlists} />
)
})}
</VStack>
</div>
)}
</Container>
)
}
