@chakra-ui/react#PopoverHeader JavaScript Examples

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

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

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

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