@chakra-ui/core#Heading JavaScript Examples

EmptyMail = () => (
  <Flex
    flexDirection='column'
    justify='center'
    alignItems='center'
    mb={3}
    style={{ height: "100%" }}
  >
    <img
      src={emptyEmailImg}
      alt='React Logo'
      style={{ width: "40%", height: "auto" }}
    />
    <Heading as='h3' size='lg' color='#a6b0b7' mt={5}>
      Click on Email to Open it
    </Heading>
  </Flex>
)

export default function Home() {
  const color = useColorModeValue("red.500", "white")
  return (
    <Stack
      as="main"
      align="center"
    >
      <Flex
        flexDirection="column"
        maxWidth="700px"
      >
        <Flex
          direction="row"
          w="700px"
          pt={4}
          justify="space-between"
        >
          <DarkModeSwitch />
          <Text color={color}>Home</Text>
        </Flex>
        <Heading
          as="h1"
          size="2xl"
          fontWeight="bold"
        >
          Hello, World!
        </Heading>
        <Text my={4}>Hello, again</Text>
      </Flex>
    </Stack>
  )
}

NotFoundPage = () => (
  <Layout>
    <SEO title="404: Not found" />
    <Box
      as="section"
      fontSize={[16, 24]}
      maxWidth={800}
      paddingX={["1rem", "4.5rem"]}
      paddingY={8}
    >
      <Heading>NOT FOUND</Heading>
      <Text>
        You just hit a route that doesn&#39;t exist... the sadness.
      </Text>
    </Box>
  </Layout>
)

function BlogPost({ data }) {
  const { nextPage, previousPage, page } = data
  const { title, content, featuredImage } = page

  return (
    <Layout>
      <Heading as="h1" size="xl" mb={5}>
        {title}
      </Heading>

      {!!featuredImage?.node?.localFile?.childImageSharp && (
        <Box mb={5}>
          <Img fluid={featuredImage.node.localFile.childImageSharp.fluid} />
        </Box>
      )}

      <p dangerouslySetInnerHTML={{ __html: content }} />

      <br />
      {!!nextPage && (
        <Link to={normalizePath(nextPage.uri)}>Next: {nextPage.title}</Link>
      )}
      <br />
      {!!previousPage && (
        <Link to={normalizePath(previousPage.uri)}>
          Previous: {previousPage.title}
        </Link>
      )}
    </Layout>
  )
}

AboutContent = () => {
  return (
    <>
      <Heading fontSize={["1.5rem", "2rem"]} lineHeight={1.125} mb="1.25rem">
        { "About" }
      </Heading>

      <Text>
        { `Using HERE location services (HERE Vector Map Tiles API and HERE Data Hub APIs) and ` }
        <Link alt="Center for Systems Science and Engineering (CSSE)" href="https://github.com/CSSEGISandData/COVID-19" color="#00AFAA">
          { "data provided by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University"}
        </Link>
        { `, and ` }
        <Link alt="DXY" href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA">
          { "DXY" }
        </Link>
        { `, we display the spread of Coronavirus COVID-19 globally. For questions regarding the global data, please get in touch with ` }
        <Link alt="Center for Systems Science and Engineering (CSSE)" href="https://github.com/CSSEGISandData/COVID-19" color="#00AFAA">
          { "JHU CSSE"}
        </Link>
        { `. For questions regarding China-specific data, please contact ` }
        <Link alt="DXY" href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA">
          { "DXY" }
        </Link>
        { `.` }
      </Text>

      <Heading fontSize={["1.25rem", "1.5rem"]} lineHeight={1.125} mt="1.75rem" mb="1.25rem">
        { "About HERE Technologies" }
      </Heading>
      <Text>
        { "HERE, a location data and technology platform, moves people, businesses and cities forward by harnessing the power of location. By leveraging our open platform, we empower our customers to achieve better outcomes – from helping a city manage its infrastructure or a business optimize its assets to guiding drivers to their destination safely. To learn more about HERE, please visit " }
        <Link href="https://www.here.com/" target="_blank" rel="noopener noreferrer" color="#00AFAA">{"www.here.com"}</Link>
        { " and " }
        <Link href="https://360.here.com/" target="_blank" rel="noopener noreferrer" color="#00AFAA">{"360.here.com"}</Link>
      </Text>
    </>
  )
}

Home = () => {
  return (
    <Flex direction="column" justify="center" align="center">
      <Heading
        as="h1"
        mb={2}
        size="2xl"
        fontStyle="italic"
        fontWeight="extrabold"
      >
        {MY_APP}
      </Heading>

      <Button
        as="a"
        href="/dashboard"
        backgroundColor="gray.900"
        color="white"
        fontWeight="medium"
        mt={4}
        maxW="200px"
        _hover={{ bg: 'gray.700' }}
        _active={{
          bg: 'gray.800',
          transform: 'scale(0.95)'
        }}
      >
        View Dashboard
      </Button>
    </Flex>
  );
}

function Header({ launch }) {
  return (
    <Flex
      bgImage={`url(${launch.links.flickr_images[0]})`}
      bgPos="center"
      bgSize="cover"
      bgRepeat="no-repeat"
      minHeight="30vh"
      position="relative"
      p={[2, 6]}
      alignItems="flex-end"
      justifyContent="space-between"
    >
      <Image
        position="absolute"
        top="5"
        right="5"
        src={launch.links.mission_patch_small}
        height={["85px", "150px"]}
        objectFit="contain"
        objectPosition="bottom"
      />
      <Heading
        color="white"
        display="inline"
        backgroundColor="#718096b8"
        fontSize={["lg", "5xl"]}
        px="4"
        py="2"
        borderRadius="lg"
      >
        {launch.mission_name}
      </Heading>
      <Stack isInline spacing="3">
        <Badge variantColor="purple" fontSize={["xs", "md"]}>
          #{launch.flight_number}
        </Badge>
        {launch.launch_success ? (
          <Badge variantColor="green" fontSize={["xs", "md"]}>
            Successful
          </Badge>
        ) : (
          <Badge variantColor="red" fontSize={["xs", "md"]}>
            Failed
          </Badge>
        )}
      </Stack>
    </Flex>
  );
}

function Header({ launchPad }) {
  return (
    <Flex
      background={`linear-gradient(${randomColor()}, ${randomColor()})`}
      bgPos="center"
      bgSize="cover"
      bgRepeat="no-repeat"
      minHeight="15vh"
      position="relative"
      flexDirection={["column", "row"]}
      p={[2, 6]}
      alignItems="flex-end"
      justifyContent="space-between"
    >
      <Heading
        color="gray.900"
        display="inline"
        mx={[2, 4]}
        my="2"
        fontSize={["md", "3xl"]}
        borderRadius="lg"
      >
        {launchPad.site_name_long}
      </Heading>
      <Stack isInline spacing="3">
        <Badge variantColor="purple" fontSize={["sm", "md"]}>
          {launchPad.successful_launches}/{launchPad.attempted_launches}{" "}
          successful
        </Badge>
        {launchPad.stats === "active" ? (
          <Badge variantColor="green" fontSize={["sm", "md"]}>
            Active
          </Badge>
        ) : (
          <Badge variantColor="red" fontSize={["sm", "md"]}>
            Retired
          </Badge>
        )}
      </Stack>
    </Flex>
  );
}

render() {
    const post = this.props.data.markdownRemark
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext

    return (
      <>
        <Box
          bg="white"
          boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
        >
          <Box px={{ md: "2rem" }}>
            <Box
              display="flex"
              flexWrap="wrap"
              justifyContent="space-between"
              alignItems="center"
              px="1rem"
            >
              <Box py={5}>
                <Heading as="h2" size="lg">
                  About Opensource.Builders
                </Heading>
                <Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
                  On a mission to find great open-source software
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>
        <SEO
          title={post.frontmatter.title}
          description={post.frontmatter.description || post.excerpt}
        />
        <Box
          display="flex"
          flexWrap="wrap"
          ml="auto"
          mr="auto"
          maxWidth="60rem"
          py={4}
          px={2}
          // p="2.625rem 1.3125rem"
        >
          <Box
            width="100%"
            boxShadow="0px 1px 4px rgba(0, 0, 0, 0.16)"
            borderRadius="3px"
            bg="white"
          >
            <article>
              <BlogText dangerouslySetInnerHTML={{ __html: post.html }} />
              <footer>
                <Bio />
              </footer>
            </article>
          </Box>
        </Box>
      </>
    )
  }

Search = () => {
  return(
    <>
      <Box
        display={["block", null, "none"]}
        position="fixed"
        top="0"
        left="0"
        right="0"
        height="0.25rem"
        bg="#00AFAA"
      />
      <Flex
        position="fixed"
        flexWrap="wrap"
        top={["1.5rem", "1.5rem", "2.5rem"]}
        right="0"
        zIndex={10}
        width="100%"
        maxWidth={["100%", null, "28rem"]}
        pr={["1.25rem", null, "2.5rem"]}
        pl={["1.25rem", null, 0]}
        alignItems="center"
      >

        <Box width="100%" display={["block", null, "none"]}>
          <Heading fontSize={["1.5rem", "2rem"]} lineHeight={1.125} mb="1.25rem">
            <Text mr="0.75rem" as="span">
              { "Tracking Coronavirus" } <br/>
              { "COVID-19" }
            </Text>
          </Heading>
        </Box>

        <Box flex="1 1 auto">
          <Combobox />
        </Box>
        <AboutModal />
      </Flex>
    </>
  )
}

TechVolunteers = () => {
  return (
    <Layout>
      <SEO title="Tech Volunteers" />

      <Section
        backgroundColor={"purple"}
        paddingY={[1,8]}
      >
        <Heading {...headerStyling}>Hello and welcome,<br/> fellow Technologists!</Heading>
        <Text {...textStyling}>
          The number of people who are volunteering for this effort is fantastic, and we want to ensure this energy gets directed to the right place and optimised.
        </Text>
        <Text {...textStyling}>
          So tell us what skills you have and your realistic availability, and we'll add you to the Slack group to get you started!
        </Text>
      </Section>

      <Section
        fontSize={[16, 16, 24]}
        paddingY={[1,8]}
      >
        <Text paddingY={5}>
          So you’re a:
        </Text>
        <List>
          <ListItem>• Developer</ListItem>
          <ListItem>• Data Scientist</ListItem>
          <ListItem>• Designer</ListItem>
          <ListItem>• Product / Project Manager</ListItem>
          <ListItem>• Content Creator, Writer</ListItem>
          <ListItem>• Marketing / PR / Marketplace Specialist</ListItem>
        </List>
        <Text>etc!</Text>
        <Text paddingY={[5]}>...and you want to help in the Covid19 crisis?</Text>
        <Text>This is what you can find here:</Text>
        <List>
          <ListItem>• Offer your skills to existing projects by code4covid group</ListItem>
          <ListItem>• Ask for tech resources for your project to code4covid group</ListItem>
          <ListItem>• Check the Coronavirus Tech Handbook by TechForUK group</ListItem>
          <ListItem>• Explore List Of Existing Tech Communities</ListItem>
        </List>

        <Link to="/tech-volunteers-form/">
          <Button {...buttonStyling}>CLICK TO START!</Button>
        </Link>
      </Section>
    </Layout>
  )
}

TimeSlider = ({ points }) => {
  const updateDate = useDataDate(state => state.updateDate)

  const uniqDays = useMemo(() => {
    const headers = points[0].properties.headers.split(";;")
    const allDates = headers
      .filter(d => {
        return d.includes("/" && ":" && "pm") || d.includes("/" && ":" && "am")
      })
      .sort((a, b) => {
        const date1 = new Date(a).getTime() 
        const date2 = new Date(b).getTime()
        return date1 - date2
      })

    const uniqDates = groupBy(allDates, o => {
      return dayjs(o).format("DD-MM-YYYY")
    })

    const uniqDays = Object.keys(uniqDates).map(d => {
      return uniqDates[d][uniqDates[d].length - 1]
    })

    return uniqDays
  }, [points])

  const [currentDate, setCurrentDate] = useState(uniqDays.length - 1)

  const [debouncedCurrentDate] = useDebounce(currentDate, 150)

  useEffect(() => {
    updateDate(uniqDays[debouncedCurrentDate])
  }, [debouncedCurrentDate, uniqDays, updateDate])

  return (
    <Box mt="2rem">

      <Heading fontSize="md" as="h3" mb="0.5rem">
        { "Timeline" }
      </Heading>

      <Flex mb="-0.75rem" zIndex={10} position="relative">
        <Badge display="inline-flex" alignItems="center" bg="#FBDFCF" color="#ec610e" fontSize="sm">
          <BlinkingDot />
            {
              currentDate === uniqDays.length - 1
                ? dayjs(points[0].properties["@ns:com:here:xyz"].updatedAt).format("DD MMM YYYY h:mm a")
                : dayjs(uniqDays[currentDate]).format("DD MMM YYYY") 
            }
        </Badge>
      </Flex>

      <TimeSeries points={points} dates={uniqDays} currentDate={currentDate} />

      <Box mr="2px">
        <Slider
          defaultValue={uniqDays.length - 1}
          min={0}
          max={uniqDays.length - 1}
          value={currentDate}
          onChange={val => setCurrentDate(val)}
        >
          <SliderTrack />
          <SliderFilledTrack bg="#ec610e" />
          <SliderThumb size="1.5rem" ml="-0.25rem">
            <Icon name="arrows" color="#ec610e" />
          </SliderThumb>
        </Slider>
      </Box>

      <Flex justifyContent="space-between">
        <Text fontSize="sm" color="gray.600" mt="-0.5rem">
          { dayjs(uniqDays[0]).format("DD MMM YYYY") }
        </Text>
        <Text fontSize="sm" color="gray.600" mt="-0.5rem">
          { dayjs(uniqDays[uniqDays.length - 1]).format("DD MMM YYYY") }
        </Text>
      </Flex>
    </Box>
  )
}

export default function AltListItem({ alt }) {
  return (
    <Box
      width={{ base: "100%" }}
      borderRadius="4px"
      m={2}
      boxShadow="0px 1px 4px rgba(0, 0, 0, 0.16)"
      bg="white"
    >
      <Box as="a" target="_blank" href={alt.site}>
        <Box display="flex" p={2}>
          <Box display="flex">
            <Box
              as="img"
              height="56px"
              width="56px"
              mr={3}
              borderRadius="4px"
              boxShadow="0px 1px 4px rgba(0, 0, 0, 0.16)"
              src={alt.svg}
            />
            <Box
              display="flex"
              flexDirection="column"
              justifyContent="center"
              lineHeight="21px"
            >
              <Text fontSize="md" fontWeight={500}>
                {alt.name}
              </Text>
              <Box
                fontSize={14}
                color="#D69E2E"
                display="flex"
                alignItems="center"
                fontWeight={600}
                mt={1}
              >
                <Icon name="star" size={3} mr={1} /> {alt.stars}
                <Tooltip
                  bg="rgb(45, 55, 72)"
                  color="rgba(255, 255, 255, 0.92);"
                  hasArrow
                  label="Language"
                  placement="top"
                >
                  <Badge ml={3} variantColor="green">
                    {alt.language}
                  </Badge>
                </Tooltip>
                <Tooltip
                  variantColor="blue"
                  hasArrow
                  label="License"
                  placement="top"
                >
                  <Badge
                    ml={3}
                    bg="rgb(206, 237, 255)"
                    color="rgb(21, 62, 117)"
                  >
                    {alt.license}
                  </Badge>
                </Tooltip>
              </Box>
            </Box>
          </Box>
          <Box
            ml="auto"
            display={{ base: "none", sm: "flex" }}
            alignItems="center"
          >
            <Box as="a" href={alt.deploy} target="_blank" mx={5}>
              {alt.deploy ? (
                deployLogo(alt.deploy)
              ) : (
                <Tooltip
                  bg="rgb(45, 55, 72)"
                  color="rgba(255, 255, 255, 0.92);"
                  hasArrow
                  label={"No Deploy Instructions Found"}
                  placement="top"
                >
                  <Box size={4}>
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                        stroke="#718096"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </Box>
                </Tooltip>
              )}
            </Box>
            <Tooltip
              bg="rgb(45, 55, 72)"
              color="rgba(255, 255, 255, 0.92);"
              hasArrow
              label="Repo"
              placement="top"
            >
              <Box
                as="a"
                href={`https://github.com/${alt.repo}`}
                target="_blank"
              >
                <svg
                  stroke="#718096"
                  fill="#718096"
                  strokeWidth="0"
                  version="1.1"
                  viewBox="0 0 32 32"
                  height="1.1em"
                  width="1.1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z" />
                </svg>
              </Box>
            </Tooltip>

            <Tooltip
              bg="rgb(45, 55, 72)"
              color="rgba(255, 255, 255, 0.92);"
              hasArrow
              label="Website"
              placement="top"
            >
              <Box size={5} mx={3} as="a" href={alt.site} target="_blank">
                <svg viewBox="0 0 24 24" focusable="false" role="presentation">
                  <path
                    fill="#718096"
                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                  />
                </svg>
              </Box>
            </Tooltip>
          </Box>
        </Box>
        <Divider display={{ sm: "none" }} my={0} borderColor="#edf1f6" />
        <Box
          display={{ base: "flex", sm: "none" }}
          alignItems="center"
          justifyContent="center"
        >
          <Box
            width="33%"
            display="flex"
            alignItems="center"
            justifyContent="center"
            py={1}
          >
            <Box
              as="a"
              href={alt.deploy}
              target="_blank"
              display="flex"
              alignItems="center"
              px={10}
            >
              {alt.deploy ? (
                deployLogo(alt.deploy)
              ) : (
                <Tooltip
                  bg="rgb(45, 55, 72)"
                  color="rgba(255, 255, 255, 0.92);"
                  hasArrow
                  label={"No Deploy Instructions Found"}
                  placement="top"
                >
                  <Box size={4}>
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                        stroke="#718096"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </Box>
                </Tooltip>
              )}
              <Heading
                fontSize="xs"
                color="gray.500"
                letterSpacing="wide"
                textTransform="uppercase"
                ml={1}
              >
                Deploy
              </Heading>
            </Box>
          </Box>
          <Box
            width="34%"
            display="flex"
            alignItems="center"
            justifyContent="center"
            borderRight="1px solid #edf1f6"
            borderLeft="1px solid #edf1f6"
            py={1}
          >
            <Box
              as="a"
              href={`https://github.com/${alt.repo}`}
              target="_blank"
              display="flex"
              alignItems="center"
            >
              <svg
                stroke="#718096"
                fill="#718096"
                strokeWidth="0"
                version="1.1"
                height="1.2em"
                width="1.2em"
                viewBox="0 0 32 32"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z" />
              </svg>
              <Heading
                fontSize="xs"
                color="gray.500"
                letterSpacing="wide"
                textTransform="uppercase"
                ml={1}
              >
                Repo
              </Heading>
            </Box>
          </Box>
          <Box
            width="33%"
            display="flex"
            alignItems="center"
            justifyContent="center"
            py={1}
          >
            <Box
              mx={3}
              as="a"
              href={alt.site}
              target="_blank"
              display="flex"
              alignItems="center"
            >
              <Heading
                fontSize="xs"
                color="gray.500"
                letterSpacing="wide"
                textTransform="uppercase"
              >
                site
              </Heading>
              <svg
                viewBox="0 0 24 24"
                focusable="false"
                role="presentation"
                height="1.2em"
                width="1.2em"
              >
                <path
                  fill="#718096"
                  d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                />
              </svg>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  )
}

render() {
    const {
      searchResults,
      searchQuery,
      category,
      language,
      license,
    } = this.state
    const queryResults =
      searchQuery === `` && license === `` && language === `` && category === ``
        ? this.props.comps
        : searchResults

    const compLoad =
      searchQuery === `` && license === `` && language === `` && category === ``
        ? this.props.mainInfo.slice(0, this.props.loadCount)
        : this.props.mainInfo

    const categories = [
      "E-commerce",
      "Developer Tools",
      "Social Media",
      "Communication",
      "Analytics",
      "Password Managers",
      "Form Builder",
      "Cloud",
      "Deployment",
      "Product Management",
      "Automation",
      "CRM",
    ]

    const licenses = [
      "GPL V3",
      "BSD-3",
      "GPL",
      "MIT",
      "OSL-3.0",
      "APACHE 2.0",
      "AGPL V3",
      "CUSTOM",
    ]

    const languages = [
      "GO",
      "JS",
      "PYTHON",
      "PHP",
      "ELIXIR",
      "RUBY",
      "C",
      "C#",
      "C++",
      "SHELL",
      "TS",
      "PERL",
    ]

    return (
      <Box>
        <Box
          bg="white"
          boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
        >
          <Box px={{ md: "2rem" }}>
            <Box
              display="flex"
              flexWrap="wrap"
              justifyContent="space-between"
              alignItems="center"
              px="1rem"
            >
              <Box py={5}>
                <Heading as="h2" size="lg">
                  Open-source alternatives
                </Heading>
                <Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
                  Find open-source alternatives for your favorite apps
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>

        <Box ml="auto" mr="auto" maxWidth="80rem" px={2} py={4}>
          <Box>
            <InputGroup size="lg" mx={1} mb={6}>
              <InputLeftElement
                children={<Icon name="search" color="gray.300" />}
              />
              <Input
                pr="4.5rem"
                placeholder="Search for anything"
                value={searchQuery}
                onChange={(e) => {
                  this.searchData(e.target.value)
                }}
                boxShadow="sm"
              />
            </InputGroup>
            <Box
              display="flex"
              alignItems="flex-start"
              flexDirection={{ base: "column", md: "row" }}
            >
              <Box
                p={3}
                maxWidth={{ base: "100%", md: "18rem" }}
                // bg="#122a4f"
                bg="white"
                boxShadow="md"
                borderRadius={4}
                mx={1}
                mb={6}
              >
                <Box>
                  <Box display="flex" flexDirection="column">
                    <Box mb={5}>
                      <Box color="gray.600" mx={2} mb={1} fontWeight={500}>
                        Categories
                      </Box>
                      <Box display="flex" flexWrap="wrap">
                        <PseudoBox
                          px={3}
                          py={1}
                          m={1}
                          borderRadius={4}
                          color={"white"}
                          fontWeight={600}
                          fontSize="sm"
                          letterSpacing="wide"
                          bg={category === "" ? "#122a4f" : "#2b4a7b"}
                          textTransform="uppercase"
                          _hover={category !== "" && { bg: "#1a3765" }}
                          onClick={() => this.categoryFilter("")}
                          cursor="pointer"
                        >
                          All
                        </PseudoBox>
                        {categories.map((c) => (
                          <PseudoBox
                            px={3}
                            py={1}
                            m={1}
                            borderRadius={4}
                            color={"white"}
                            fontWeight={600}
                            letterSpacing="wide"
                            fontSize="sm"
                            bg={category === c ? "#122a4f" : "#2b4a7b"}
                            textTransform="uppercase"
                            _hover={category !== c && { bg: "#1a3765" }}
                            onClick={() => this.categoryFilter(c)}
                            cursor="pointer"
                          >
                            {c}
                          </PseudoBox>
                        ))}
                      </Box>
                    </Box>
                    <Box mb={5}>
                      <Box color="gray.600" mx={2} mb={1} fontWeight={500}>
                        License
                      </Box>
                      <Box display="flex" flexWrap="wrap">
                        <PseudoBox
                          px={3}
                          py={1}
                          m={1}
                          borderRadius={4}
                          color={"white"}
                          fontWeight={600}
                          letterSpacing="wide"
                          fontSize="sm"
                          bg={license === "" ? "#122a4f" : "#00bf70"}
                          textTransform="uppercase"
                          _hover={license !== "" && { bg: "#029c5d" }}
                          onClick={() => this.licenseFilter("")}
                          cursor="pointer"
                        >
                          All
                        </PseudoBox>
                        {licenses.map((c) => (
                          <PseudoBox
                            px={3}
                            py={1}
                            m={1}
                            borderRadius={4}
                            color={"white"}
                            fontWeight={600}
                            fontSize="sm"
                            letterSpacing="wide"
                            bg={license === c ? "#122a4f" : "#00bf70"}
                            textTransform="uppercase"
                            _hover={license !== c && { bg: "#029c5d" }}
                            onClick={() => this.licenseFilter(c)}
                            cursor="pointer"
                          >
                            {c}
                          </PseudoBox>
                        ))}
                      </Box>
                    </Box>
                    <Box>
                      <Box color="gray.600" mx={2} mb={1} fontWeight={500}>
                        Language
                      </Box>
                      <Box display="flex" flexWrap="wrap">
                        <PseudoBox
                          px={3}
                          py={1}
                          m={1}
                          borderRadius={4}
                          color={"white"}
                          fontSize="sm"
                          fontWeight={600}
                          letterSpacing="wide"
                          bg={language === "" ? "#122a4f" : "orange.500"}
                          textTransform="uppercase"
                          _hover={language !== "" && { bg: "#af5417" }}
                          onClick={() => this.languageFilter("")}
                          cursor="pointer"
                        >
                          All
                        </PseudoBox>
                        {languages.map((c) => (
                          <PseudoBox
                            px={3}
                            py={1}
                            m={1}
                            borderRadius={4}
                            color={"white"}
                            fontWeight={600}
                            letterSpacing="wide"
                            fontSize="sm"
                            bg={language === c ? "#122a4f" : "orange.500"}
                            textTransform="uppercase"
                            _hover={language !== c && { bg: "#af5417" }}
                            onClick={() => this.languageFilter(c)}
                            cursor="pointer"
                          >
                            {c}
                          </PseudoBox>
                        ))}
                      </Box>
                    </Box>
                  </Box>
                </Box>
              </Box>
              <Box display="flex" flexWrap="wrap" width="100%">
                {compLoad.map((comp) => {
                  const match = queryResults.filter(
                    (alt) => alt.mainID === comp.id
                  )
                  if (match.length > 0) {
                    return (
                      <CompGroup
                        comp={comp}
                        commercial={comp.commercial}
                        alts={match}
                      />
                    )
                  }
                })}
              </Box>
            </Box>
          </Box>
        </Box>
      </Box>
    )
  }

Index = ({ data, location }) => {
  const [{ alternatives }] = useJsonForm(data.altsJson, {
    label: "Add an app comparison",
    fields: [
      {
        label: "Comparisons",
        name: "rawJson.alternatives",
        component: "group-list",
        description: "Comparisons List",
        itemProps: (item) => ({
          label: item.commercial[0].main,
        }),
        defaultItem: () => ({
          main: "New Comparison",
          alts: [],
          id: Math.random().toString(36).substr(2, 9),
        }),
        fields: [
          // {
          //   label: "Main Application",
          //   name: "main",
          //   component: "text",
          // },
          // {
          //   label: "Website",
          //   name: "website",
          //   component: "text",
          // },
          // {
          //   label: "Logo URL",
          //   name: "svg",
          //   component: "text",
          // },
          {
            label: "Commercial Apps",
            name: "commercial",
            component: "group-list",
            description: "Commercial Apps",
            itemProps: (item) => ({
              label: item.main,
            }),
            fields: [
              {
                label: "Main Application",
                name: "main",
                component: "text",
              },
              {
                label: "Website",
                name: "website",
                component: "text",
              },
              {
                label: "Logo URL",
                name: "svg",
                component: "text",
              },
            ],
          },
          {
            label: "Opensource Alternatives",
            name: "alts",
            component: "group-list",
            description: "Alternatives List",
            itemProps: (item) => ({
              label: item.name,
            }),
            fields: [
              {
                label: "Name",
                name: "name",
                component: "text",
              },
              {
                label: "Stars",
                name: "stars",
                component: "text",
              },
              {
                label: "License",
                name: "license",
                component: "text",
              },
              {
                label: "Logo URL",
                name: "svg",
                component: "text",
              },
              {
                label: "Site",
                name: "site",
                component: "text",
              },
              {
                label: "Language",
                name: "language",
                component: "text",
              },
              {
                label: "Repo",
                name: "repo",
                component: "text",
              },
              {
                label: "Deploy",
                name: "deploy",
                component: "text",
              },
            ],
          },
          {
            name: "category",
            component: "select",
            label: "Category",
            description: "Select a category",
            options: [
              "E-commerce",
              "Developer Tools",
              "Social Media",
              "Communication",
              "Analytics",
              "Password Managers",
              "Form Builder",
              "Cloud",
              "Deployment",
              "Product Management",
              "Automation",
              "CRM",
              "Visual Database",
            ],
          },
        ],
      },
    ],
  })

  return (
    <>
      <SEO title="Opensource.builders" />
      <Box
        bg="white"
        boxShadow="0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
      >
        <Box px={{ md: "2rem" }}>
          <Box
            display="flex"
            flexWrap="wrap"
            justifyContent="space-between"
            alignItems="center"
            px="1rem"
          >
            <Box py={5}>
              <Heading as="h2" size="lg">
                Open-source alternatives
              </Heading>
              <Text fontSize="md" fontWeight={400} color="#939fae" mt={1}>
                Find open-source alternatives for your favorite apps
              </Text>
            </Box>
          </Box>
        </Box>
      </Box>
      <Box
        display="flex"
        flexWrap="wrap"
        ml="auto"
        mr="auto"
        maxWidth="60rem"
        px={2}
        py={4}
      >
        {data.altsJson.alternatives.map((comp) => (
          <CompGroup
            comp={comp}
            commercial={comp.commercial}
            alts={comp.alts}
          />
        ))}
      </Box>
    </>
  )
}

Listing = ({ rows }) => {
  const currentDataType = useDataTypeStore(state => state.currentDataType)
  const tabIndex = currentDataType
  const currentDate = useDataDate(state => state.currentDate)
  const updateMapFocus = useMapFocus(state => state.updateMapFocus)
  const updateTab = useTabStore(state => state.updateTab)

  const handleClick = (coordinates, properties) => {
    updateTab(1)
    updateMapFocus([ coordinates[1], coordinates[0] ], properties)
  }

  const grouped = groupBy(rows.map(d =>
    d.properties.countryregion === "Mainland China" || d.properties.countryregion === "Hong Kong" || d.properties.countryregion === "Macau" || d.properties.countryregion === "Taiwan" ? { ...d, properties: { ...d.properties, countryregion: "China" } } : d),
    // d),
    o => o.properties.countryregion
  )

  const groups = Object.keys(grouped).map(d => {
    return {
      key: d,
      sum: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties[currentDate] || 0), 0),
      sum2: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties["deaths_" + currentDate] || 0), 0),
      sum3: grouped[d].reduce((acc, cur) => acc + parseInt(cur.properties["recoveries_" + currentDate] || 0), 0),
      items: grouped[d].filter(d => d.properties[currentDate]).sort((a, b) => b.properties[currentDate] - a.properties[currentDate]),
    }
  }).filter(d => d.sum)
    .sort((a, b) => {
      return tabIndex === 0
        ? b.sum - a.sum
        : tabIndex === 1
          ? b.sum2 - a.sum2
          : b.sum3 - a.sum3
    })

  return (
    <div>

      <DataTypeSwitch rows={rows} />

      <Accordion defaultIndex={[0]} allowMultiple mt="0">

        {
          groups.map((group, i) => {
            return (
              <AccordionItem key={group.key} borderColor={!i ? "transparent" : "gray.200"}>
                <AccordionHeader>
                  <Flex justifyContent="space-between" alignItems="center" flex="1 1 auto" py="0.5rem">
                    <Heading pl="1.25rem" color="gray.500" fontSize="1rem" textTransform="uppercase">
                      {group.key}
                    </Heading>
                    <Box pr="1.25rem" color="gray.500" fontWeight={700}>
                      { tabIndex === 0 ? formatThousand(group.sum) : null }
                      { tabIndex === 1 ? formatThousand(group.sum2) : null }
                      { tabIndex === 2 ? formatThousand(group.sum3) : null }
                    </Box>
                  </Flex>
                  <AccordionIcon mr="1.375rem" />
                </AccordionHeader>
                <AccordionPanel pt="0">
                  {
                    group.items.map(({ properties, geometry }, i) => {

                      const {
                        provincestate,
                        countryregion,
                        ...restProps
                      } = properties

                      return (
                        <PseudoBox
                          tabIndex={0}
                          key={provincestate + i}
                          bg="transparent"
                          borderRadius="lg"
                          py="0.75rem"
                          px="1.25rem"
                          border="0.0625rem solid"
                          borderColor="gray.200"
                          mt="0.5rem"
                          mb="0.75rem"
                          onClick={() => handleClick(geometry.coordinates, properties)}
                          cursor="pointer"
                          _hover={{
                            bg: "gray.100",
                          }}
                          _focus={{
                            bg: "gray.100",
                          }}
                          _active={{
                            bg: "gray.200",
                          }}
                        >
                          <Stack isInline alignItems="top" justifyContent="space-between">
                            <Stack spacing="0.125rem">
                              <Text lineHeight={1.25} color="gray.500" fontSize="xs" fontWeight={600} textTransform="uppercase">
                                {countryregion}
                              </Text>
                              <Text fontSize="lg" lineHeight={1.25} fontWeight={700}>
                                {provincestate || countryregion}
                              </Text>
                            </Stack>
                            <Stack isInline alignItems="center" spacing="1.5rem">
                              <Stack spacing="0.125rem" textAlign="right">
                                <Text lineHeight={1.25} color="gray.500" fontSize="xs" fontWeight={600} textTransform="uppercase">
                                  { tabIndex === 0 ? "Confirmed" : null }
                                  { tabIndex === 1 ? "Deaths" : null }
                                  { tabIndex === 2 ? "Recoveries" : null }
                                </Text>
                                <Text fontSize="lg" fontWeight={700} color="gray.500">
                                  { tabIndex === 0 ? formatThousand(restProps[currentDate] || 0) : null }
                                  { tabIndex === 1 ? formatThousand(restProps["deaths_" + currentDate] || 0) : null }
                                  { tabIndex === 2 ? formatThousand(restProps["recoveries_" + currentDate] || 0) : null }
                                </Text>
                              </Stack>
                              <Icon name="pin" size="1.5rem" color="gray.600"/>
                            </Stack>
                          </Stack>
                        </PseudoBox>
                      )
                    })
                  }
                </AccordionPanel>
              </AccordionItem>
            )
          })
        }
      </Accordion>
    </div>
  )
}

App = () => {
  const currentTab = useTabStore(state => state.currentTab)

  const { data, error } = useSWR(`https://xyz.api.here.com/hub/spaces/${spaceId}/bbox?west=-180&north=90&east=180&south=-90&access_token=${accessToken}`, fetcher, { focusThrottleInterval: 60000 })
  const points = data ? (data.features || []) : []

  useEffect(() => {
    const cbox = document.getElementsByClassName("main-combobox")[0]
    if (cbox) cbox.focus()
  }, [])

  return (
    <>
      <Box
        display={!currentTab ? "block" : ["none", null, "block"]}
        position="fixed"
        top="0"
        left="0"
        bottom="0"
        zIndex={999999}
        borderTop="0.25rem solid #00AFAA"
        width={["100%", null, "25rem", "30rem"]}
        boxShadow="lg"
        overflow="scroll"
        bg="white"
        pb="5rem"
        style={{
          WebkitOverflowScrolling: "touch",
        }}
      >
        <Box px="1.25rem" pt="1.25rem">
          <Heading fontSize={["1.5rem", "2rem", null, "2.5rem"]} lineHeight={1.125} mb="1.25rem">
            <Text mr="0.75rem" as="span">
              { "Tracking Coronavirus" } <br/>
              { "COVID-19" }
            </Text>
          </Heading>
          { points.length ? <IntroParagraph points={points} /> : null}
          { points.length ? <TimeSlider points={points} /> : null }
        </Box>
        { points.length ? <Listing rows={points} /> : null }
      </Box>

      <Flex
        position="absolute"
        bottom={["3.5rem", null, "1.25rem"]}
        left={["1rem", null, "26.25rem", "32.5rem"]}
        right={["1rem", null, "2rem"]}
        zIndex={2}
        justifyContent="space-between"
        alignItems="flex-end"
      >
        <Flex flexWrap="wrap" justifyContent="space-between" flex="1 1 auto" pr={["0.75rem", null, 0]}>
          <Text as="span" fontSize="xs" color="gray.900" fontWeight={600}>
            {"Data: "}
            <Link href="https://github.com/CSSEGISandData/COVID-19" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"JHU CSSE"}</Link>
            { " and " }
            <Link href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">
              {"DXY"}
            </Link>
          </Text>
          <Text as="span" fontSize="xs" color="gray.900" fontWeight={600}>
            {"Made with Leaflet, "}
            <Link href="https://developer.here.com/documentation/vector-tiles-api/dev_guide?cid=Freemium-DeveloperPortalTutorial-PJ-0-Javascript-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=Webinar_IOT_2020_Golden-Age-Location-Enabled-AI-Jan-16" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"HERE Vector Map Tiles API"}</Link>
            {" and "}
            <Link href="https://developer.here.com/products/xyz?cid=Freemium-DeveloperPortalTutorial-PJ-0-XYZ-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=CoronaVirusMap" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"HERE Data Hub APIs"}</Link>
            { " | " }
            <Link href="#" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">
              {"Get the code"}
              <Icon name="github" ml="0.25rem" mt="-0.125rem" />
            </Link>
          </Text>
        </Flex>
        <Link flex="none" href="https://developer.here.com/?cid=Freemium-DeveloperPortalTutorial-PJ-0-Javascript-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=Webinar_IOT_2020_Golden-Age-Location-Enabled-AI-Jan-16">
          <img src={hereLogo} alt="HERE logo" style={{ width: "2.5rem", marginLeft: "0.75rem" }} />
        </Link>
      </Flex>

      <Map points={points} />

      <Search />

      <Box
        position="fixed"
        bottom={["5.5rem", null, "4rem"]}
        right={["1rem", null, "2.5rem"]}
        zIndex={2}
        width={["6rem", "8rem", "10rem"]}
        height={["6rem", "8rem", "10rem"]}
        boxShadow="lg"
        borderRadius="100%"
        bg="white"
        border="0.125rem solid"
        borderColor="gray.50"
        pointerEvents="none"
      >
        <Globe />
      </Box>

      {
        currentTab === 2 ? (
          <Box
            display="block"
            position="fixed"
            top="0"
            left="0"
            bottom="0"
            zIndex={999999}
            borderTop="0.25rem solid #00AFAA"
            width={["100%", null, "25rem", "30rem"]}
            boxShadow="lg"
            overflow="scroll"
            bg="white"
            pb="5rem"
            style={{
              WebkitOverflowScrolling: "touch",
            }}
          >
            <Box px="1.25rem" pt="1.25rem">
              <AboutContent />
            </Box>
          </Box>
        ) : null
      }

      <NavigationTabs />

      <CurrentCircle />

    </>
  )
}

function NavBar({
  history,
  isLoading,
  isBlocked,
  setSearchResults,
  trackFilters,
  setTrackFilters,
  typeFilters,
  setTypeFilters,
  getUser,
  userData,
}) {
  const userId = window.localStorage.getItem('userId')
  // use to navigate to review form
  const navToReviewForm = () => {
    history.push('/dashboard/add-review')
    ReactGA.event({
      category: 'Review',
      action: `Add new review`,
    })
  }

  // image helper
  const [imageTimeout, setImageTimeout] = useState(true)
  useEffect(() => {
    setTimeout(function () {
      setImageTimeout(false)
    }, 1500)
  }, [])

  const logout = () => {
    localStorage.clear('token')
    localStorage.clear('userId')
    history.push('/')
  }

  const handleInputChange = (event) => {
    event.preventDefault()
    setSearchResults(event.target.value.toLowerCase())
  }

  // We could get this fronm the DB if we had endpoints
  const types = [
    { id: 1, criteria: 'type', name: 'Interview' },
    { id: 2, criteria: 'type', name: 'Company' },
  ]

  const tracks = [
    { id: 1, criteria: 'track', name: 'WEB' },
    { id: 2, criteria: 'track', name: 'UX' },
    { id: 3, criteria: 'track', name: 'DS' },
    { id: 4, criteria: 'track', name: 'iOS' },
    { id: 5, criteria: 'track', name: 'Android' },
  ]

  //track badge colors and background color picker
  const trackFontColor = (trackName) => {
    switch (trackName) {
      case 'DS':
        return '#35694F'
        break
      case 'WEB':
        return '#474EA7'
        break
      case 'iOS' || 'IOS':
        return '#8E3D19'
        break
      case 'Android':
        return '#4B3569'
        break
      case 'UX':
        return '#9F3A5A'
        break
      default:
        return
    }
  }
  const trackColorPicker = (trackName) => {
    switch (trackName) {
      case 'DS':
        return '#D3F2CD'
        break
      case 'WEB':
        return '#DBEBFD'
        break
      case 'iOS' || 'IOS':
        return '#F4E6BE'
        break
      case 'Android':
        return '#E9D9FF'
        break
      case 'UX':
        return '#F9E3DE'
        break
      default:
        return
    }
  }
  ///
  //// handle type filter and state for the badge / show
  const [type, setType] = useState([])
  const handleType = (name) => {
    if (typeFilters.includes(name)) {
      setTypeFilters(typeFilters.filter((item) => item !== name))
      setType(type.filter((x) => x !== name))
    } else {
      setTypeFilters(typeFilters.filter((item) => item !== name))
      setTypeFilters([...typeFilters, name])
      setType([...type, name])
    }
  }

  const typeBadge = (name) => {
    return name.map((typeName, index) => (
      <Badge
        key={`ReviewBadge-${index}`}
        backgroundColor="#E2E2E2"
        color="#131C4D"
        fontFamily="Muli"
        fontWeight="normal"
        p="5px 15px"
        m="5px"
        style={{ borderRadius: '50px' }}
        variantColor="green"
      >
        {typeName}
      </Badge>
    ))
  }
  //// handle track filter and state for the badge color / show

  const [track, setTrack] = useState([])
  const handleTrack = (name) => {
    if (trackFilters.includes(name)) {
      setTrackFilters(trackFilters.filter((item) => item !== name))
      setTrack(track.filter((x) => x !== name))
    } else {
      setTrackFilters(trackFilters.filter((item) => item !== name))
      setTrackFilters([...trackFilters, name])
      setTrack([...track, name])
    }
  }

  const trackBadge = (name) => {
    return name
      .map((typeName, index) => {
        if (index < 2) {
          return (
            <Badge
              key={`TrackBadge-${index}`}
              p="5px 15px"
              m="2px"
              fontFamily="Muli"
              fontWeight="normal"
              backgroundColor={trackColorPicker(typeName)}
              color={trackFontColor(typeName)}
              style={{ borderRadius: '50px' }}
              variantColor="green"
            >
              {typeName}
            </Badge>
          )
        } else {
          return (
            <Badge
              key={`TrackBadge-${index}`}
              backgroundColor="#E2E2E2"
              color="#131C4D"
              fontFamily="Muli"
              fontWeight="normal"
              p="5px 15px"
              m="2px"
              style={{ borderRadius: '50px' }}
              variantColor="green"
            >
              . . .
            </Badge>
          )
        }
      })
      .filter((item, index) => index < 3)
  }

  useEffect(() => {
    getUser(userId)
  }, [getUser, userId])

  return (
    <Flex
      maxW="1440px"
      w="100%"
      background="#FFFFFF"
      top="0"
      position="fixed"
      zIndex="999"
      direction="column"
    >
      <Flex
        align="center"
        justify="space-between"
        py="28px"
        mb="4%"
        h="100px"
        borderBottom="1px solid #EAF0FE"
      >
        <Flex color="#344CD0" align="center" pl="40px">
          <h1 fontFamily="Poppins" fontWeight="600" fontSize="32px">
            Allay
          </h1>
        </Flex>

        {/* Search bar*/}
        <InputGroup w="40%">
          <InputRightElement>
            <Icon name="search-2" color="#344CD0" />
          </InputRightElement>
          <Input
            width="100%"
            placeholder="Search for company or position..."
            name="searchbar"
            type="text"
            rounded="20px"
            borderColor="rgba(149, 149, 149, 0.2)"
            borderWidth="1px"
            onChange={handleInputChange}
          />
        </InputGroup>

        {/* Profile Icon and user menu*/}
        <Flex pr="40px">
          <Menu position="absolute" height="226px">
            {imageTimeout ? (
              <Spinner />
            ) : (
              <MenuButton
                data-cy="profileButton"
                as={Image}
                size="58px"
                cursor="pointer"
                style={{
                  borderRadius: '50%',
                }}
                src={userData.profile_image}
                fallbackSrc={require('../../icons/user.svg')}
              />
            )}
            <MenuList>
              <MenuItem
                border="none"
                backgroundColor="#FFF"
                onClick={() => history.push(`/profile/${userId}`)}
                data-cy="profileLink"
              >
                Profile
              </MenuItem>
              <MenuItem
                border="none"
                backgroundColor="#FFF"
                onClick={() => history.push(`/profile/${userId}/edit`)}
                data-cy="editProfileMenuOption"
              >
                Account settings
              </MenuItem>
              <MenuItem
                border="none"
                backgroundColor="#FFF"
                onClick={logout}
                data-cy="signOut"
              >
                Log out
              </MenuItem>
            </MenuList>
          </Menu>
        </Flex>
      </Flex>

      <Box>
        {/* Filtered Search Buttons */}
        <Flex
          align="center"
          width="100%"
          margin="0 auto"
          justify="space-between"
          px="40px"
        >
          <Heading
            as="h1"
            fontSize="36px"
            fontFamily="Poppins"
            fontWeight="600"
            color="#131C4D"
          >
            Reviews
          </Heading>
          <Flex>
            <Menu margin="3%" closeOnSelect={false}>
              <MenuButton
                outline="none"
                w="309px"
                h="65px"
                bg="#FFFFFF"
                mr="20px"
                border="2px solid #EAF0FE"
                rounded="32px"
                fontFamily="Muli"
                fontSize="20px"
                fontWeight="bold"
              >
                <Flex
                  justify="space-between"
                  align="center"
                  pl={track.length > 0 ? '10px' : '30px'}
                  pr="18px"
                >
                  <Flex w="100%">
                    {type.length > 0
                      ? typeBadge(type)
                      : 'Filter by review type'}
                  </Flex>

                  <Icon name="triangle-down" color="#344CD0" fontSize="16px" />
                </Flex>
              </MenuButton>
              <MenuList minWidth="240px">
                {types.map((type) => (
                  <MenuOptionGroup
                    key={type.name}
                    defaultValue={typeFilters}
                    type="checkbox"
                  >
                    <MenuItemOption
                      border="none"
                      backgroundColor="#FFF"
                      value={type.name}
                      onClick={() => handleType(type.name)}
                    >
                      {type.name}
                    </MenuItemOption>
                  </MenuOptionGroup>
                ))}
              </MenuList>
            </Menu>
            <Menu closeOnSelect={false}>
              <MenuButton
                outline="none"
                w="260px"
                h="65px"
                bg="#FFFFFF"
                border="2px solid #EAF0FE"
                rounded="32px"
                fontFamily="Muli"
                fontSize="20px"
                fontWeight="bold"
              >
                <Flex
                  justify="space-between"
                  align="center"
                  pl={track.length > 0 ? '10px' : '30px'}
                  pr="18px"
                >
                  <Flex w="100%">
                    {track.length > 0 ? trackBadge(track) : 'Filter by field'}
                  </Flex>

                  <Icon name="triangle-down" color="#344CD0" fontSize="16px" />
                </Flex>
              </MenuButton>
              <MenuList minWidth="240px">
                {tracks.map((track) => (
                  <MenuOptionGroup
                    key={track.name}
                    defaultValue={trackFilters}
                    type="checkbox"
                  >
                    <MenuItemOption
                      border="none"
                      backgroundColor="#FFF"
                      value={track.name}
                      onClick={() => handleTrack(track.name)}
                    >
                      {track.name}
                    </MenuItemOption>
                  </MenuOptionGroup>
                ))}
              </MenuList>
            </Menu>
          </Flex>
          {isBlocked ? (
            <Blocked />
          ) : (
            <Button
              background="#344CD0"
              color="#FDFDFF"
              _hover={{ bg: '#4254BA', cursor: 'pointer' }}
              fontFamily="Muli"
              fontWeight="bold"
              fontSize="20px"
              rounded="35px"
              p="19px 20px"
              w="180px"
              h="63px"
              border="none"
              size="lg"
              isLoading={isLoading}
              onClick={navToReviewForm}
              data-cy="addReviewButton"
            >
              Write a review
            </Button>
          )}
        </Flex>
      </Box>
    </Flex>
  )
}