@chakra-ui/core#Stack JavaScript Examples

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

export default function Footer() {
  const color = useColorModeValue('gray.900', 'gray.200');
  const bgColor = useColorModeValue('gray.200', 'gray.500');

  return (
    <Stack direction="row" as="footer" mt={12} justify="center">
      {links.map(([icon, route, title]) => (
        <Link
          href={route}
          key={route}
          isExternal
          title={title}
          color={color}
          borderRadius="lg"
          p={2}
          _hover={{ bg: bgColor }}
        >
          <Box as={icon} boxSize={6} />
        </Link>
      ))}
    </Stack>
  );
}

function RecentLaunches({ launches }) {
  if (!launches?.length) {
    return null;
  }
  return (
    <Stack my="8" spacing="3">
      <Text fontSize="xl" fontWeight="bold">
        Last launches
      </Text>
      <SimpleGrid minChildWidth="350px" spacing="4">
        {launches.map((launch) => (
          <LaunchItem launch={launch} key={launch.flight_number} />
        ))}
      </SimpleGrid>
    </Stack>
  );
}

Header = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <Flex
      as="header"
      backgroundColor="white"
      paddingX={["1rem", "4.5rem"]}
      paddingY={[1,6]}
      justifyContent="space-between"
      alignItems="center"
    >
      <GatsbyLink to="/">
        <Code4Covid width={200}/>
      </GatsbyLink>
      <IconButton
        display={["block", "block", "block", "block", "none"]} // Match this with the inverse of the buttons stack to use Chakra breakpoints
        variant="ghost"
        size="lg"
        aria-label="Navigation Button"
        icon="menu"
        onClick={onOpen}
      />
      <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
        <DrawerOverlay />
        <DarkMode>
          <DrawerContent backgroundColor="gray.700" color="white">
            <DrawerCloseButton />
            <DrawerBody>
              <Stack as="nav" direction="column" marginTop={16} spacing={8}>
                {PAGES.map(page => (
                  <NavLink
                    key={page.children + page.to}
                    fontSize={28}
                    color="white"
                    css={css`
                      [aria-current]& {
                        font-weight: 700;
                      }
                    `}
                    {...page}
                  />
                ))}
                <Link textAlign="center" href="https://twitter.com/code4covid" isExternal>
                  <TwitterIcon width="40px" style={{ display: "inline-block" }} />
                </Link>
              </Stack>
            </DrawerBody>
          </DrawerContent>
        </DarkMode>
      </Drawer>
    </Flex>
  )
}

export default function Home() {
  return (
    <Stack m="6" spacing="6">
      <PageLink url="/launches">Browse SpaceX Launches</PageLink>
      <PageLink url="/launch-pads">Browse SpaceX Launch Pads</PageLink>
    </Stack>
  );
}

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

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

Login = ({ login, isLoading, history }) => {
  const { handleSubmit, errors, register, formState } = useForm()
  const [show, setShow] = React.useState(false)
  const handleClick = () => setShow(!show)

  function validateEmail(value) {
    let error
    if (!value) {
      error = 'email is required'
    } else if (value.length < 5) {
      error = 'email needed'
    }
    return error || true
  }

  function validatePassword(value) {
    let error
    if (!value) {
      error = 'Password is required'
    } else if (value.length < 8) {
      error = 'Password must be at least 8 characters'
    }
    return error || true
  }

  const submitForm = (creds) => {
    // action function here
    login(creds).then(() => history.push('/dashboard'))
    ReactGA.event({
      category: 'User',
      action: `Button Login`,
    })
  }

  const gaSignup = () => {
    ReactGA.event({
      category: 'User',
      action: `Link Don't have an account`,
    })
  }

  if (isLoading) {
    return (
      <Flex justify="center" align="center" w="100%" h="100vh">
        <Flex>
          <CustomSpinner />
        </Flex>
      </Flex>
    )
  }

  return (
    <Flex className="LoginSplash" w="100%" minH="100vh" justify="center">
      <Flex maxW="1440px" w="100%">
        <Stack
          wrap="wrap"
          w="60%"
          ml="6.5%"
          mb="15%"
          justify="center"
          align="center"
        >
          <Text
            as="h1"
            w="100%"
            fontFamily="Poppins"
            fontSize="80px"
            fontWeight="bold"
          >
            Allay
          </Text>
          <Text w="100%" fontFamily="Poppins" fontSize="52px" fontWeight="bold">
            We're stronger together.
          </Text>
        </Stack>
        <Flex
          w="40%"
          mb="10%"
          mr="8%"
          justify="center"
          align="center"
          flexDir="column"
        >
          <form onSubmit={handleSubmit(submitForm)}>
            <Flex
              w="473px"
              h="480px"
              flexDir="column"
              background="#FDFDFF"
              justify="center"
            >
              <Flex
                as="h2"
                fontSize="36px"
                fontFamily="Poppins"
                justify="center"
                mx="1"
                my="2%"
              >
                Welcome back!
              </Flex>

              <Flex wrap="wrap" w="411px%" justify="center">
                <FormControl isInvalid={errors.email}>
                  <FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
                    Email
                  </FormLabel>
                  <SignupLoginInput
                    mb="30px"
                    type="text"
                    name="email"
                    label="email"
                    placeholder="lambda1"
                    autoCapitalize="none"
                    ref={register({ validate: validateEmail })}
                  />
                  <FormErrorMessage>
                    {errors.email && errors.email.message}
                  </FormErrorMessage>
                </FormControl>
                <FormControl isInvalid={errors.password}>
                  <Flex flexDir="column">
                    <FormLabel
                      color="#131C4D"
                      fontSize="18px"
                      fontFamily="Muli"
                    >
                      Password
                    </FormLabel>
                    <InputGroup>
                      <SignupLoginInput
                        mb="30px"
                        type={show ? 'text' : 'password'}
                        name="password"
                        label="Password"
                        placeholder="********"
                        autoCapitalize="none"
                        ref={register({ validate: validatePassword })}
                      />
                      <InputRightElement width="4.5rem" py="32px">
                        <Button
                          h="1.75rem"
                          color="rgba(72, 72, 72, 0.1)"
                          border="none"
                          size="sm"
                          backgroundColor="#FDFDFF"
                          onClick={handleClick}
                        >
                          {show ? 'Hide' : 'Show'}
                        </Button>
                      </InputRightElement>
                    </InputGroup>
                    <FormErrorMessage>
                      {errors.password && errors.password.message}
                    </FormErrorMessage>
                  </Flex>
                </FormControl>
                <Flex width="100%" justify="center">
                  <Button
                    width="85%"
                    mb="30px"
                    border="none"
                    rounded="50px"
                    h="58px"
                    my="2%"
                    size="lg"
                    color="white"
                    backgroundColor="#344CD0"
                    _hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
                    isLoading={formState.isSubmitting}
                    type="submit"
                    data-cy="loginSubmit"
                  >
                    Login
                  </Button>
                </Flex>
              </Flex>
              <Flex m="15px" justify="center" fontWeight="light">
                <Text fontSize="16px" color="#17171B" fontFamily="Muli">
                  Don't have an account?{' '}
                  <Link
                    to="/signup"
                    onClick={gaSignup}
                    data-cy="signupLink"
                    style={{
                      textDecoration: 'none',
                      fontWeight: 'bold',
                      color: '#344CD0',
                      fontSize: '16px',
                    }}
                  >
                    Sign up here!
                  </Link>
                </Text>
              </Flex>
            </Flex>
          </form>
        </Flex>
      </Flex>
    </Flex>
  )
}

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

Map = ({ points }) => {

  const currentDataType = useDataTypeStore(state => state.currentDataType)

  const updateCenter = useStore(state => state.updateCenter)
  const mapFocus = useMapFocus(state => state.mapFocus)
  const mapZoom = useMapFocus(state => state.mapZoom)
  const updateMapFocus = useMapFocus(state => state.updateMapFocus)
  const currentDate = useDataDate(state => state.currentDate)
  const [loadedMap, setLoadedMap] = useState(false)

  const mapRef = useRef()
  const Leaflet = useRef()
  const sceneRef = useRef()
  const leafletMap = useRef()

  useEffect(() => {
    if (typeof window === undefined || !points.length) return
    const L = require("leaflet")
    const Tangram = require("tangram")
    Leaflet.current = L

    if (leafletMap.current) {
      leafletMap.current.remove()
      leafletMap.current = null
      sceneRef.current = null
    }

    const popup = L.popup({ autoPan: false })

    const map = L.map(mapRef.current, {
      zoomControl: false,
      minZoom: 3,
      maxZoom: 8,
      scrollWheelZoom: true,
    })

    const layer = Tangram.leafletLayer({
      scene,
      attribution: "Loading map",
      webGLContextOptions: {
        antialias: false,
      },
      events: {
        click: selection => {
          if (!selection.feature || (!selection.feature && !selection.feature.properties)) {
            return
          }
          const { lat, long } = selection.feature.properties
          updateMapFocus([lat, long], selection.feature.properties)
        },
        hover: selection => {
          if (!selection.feature || (!selection.feature && !selection.feature.properties)) {
            mapRef.current.style.cursor = "default"
            map.closePopup()
            return
          }

          mapRef.current.style.cursor = "pointer"

          const coords = selection.leaflet_event.latlng
          const sceneDate = sceneRef.current.config.global.currentDate
          const sceneDataType = sceneRef.current.config.global.currentDataType
          const { prefix } = sceneRef.current.config.global

          const num = formatThousand(selection.feature.properties[prefix + sceneDate])

          const isChina = ["Mainland China", "Macau", "Hong Kong", "Taiwan"].includes(selection.feature.properties.countryregion)

          const label = sceneDataType === 0
            ? "Confirmed cases" : sceneDataType === 1 ? "Deaths" : "Recoveries"

          const value = num
            ? `
              <div>
                <div class="tt-address">
                  <p class="tt-zip-code-value">
                    ${selection.feature.properties.provincestate || selection.feature.properties.countryregion}
                  </p>
                  ${
                    selection.feature.properties.provincestate ? `
                      <p class="tt-zip-code-title">
                        ${isChina ? "China" : selection.feature.properties.countryregion}
                      </p>` : ""
                  }
                </div>
                <p class="tt-median-rent-title">${label}</p>
                <p class="tt-median-rent-value">
                  <span>${num}</span>
                </p>
              </div>
            `
            : ""

          popup
            .setLatLng([coords.lat, coords.lng])
            .setContent(`${value}`)
            .openOn(map)

        }
      },
    })

    map.on("move", () => {
      const { lat, lng } = map.getCenter()
      updateCenter([-lng, -lat])
    })

    layer.addTo(map)
    sceneRef.current = layer.scene    
    map.setView([30, 110], 4)
    leafletMap.current = map

    const geojsonData = {
      type: "FeatureCollection",
      features: points,
    }

    const ext = extent(points, d => {
      const headers = d.properties.headers.split(";;")
      const lastDate = headers[headers.length - 1]
      return parseInt(d.properties[lastDate])
    })

    layer.scene.subscribe({
      load: () => {
        layer.scene.config.global.max = ext[1]
        layer.scene.updateConfig()
        layer.scene.setDataSource("dynamic_data", {
          type: "GeoJSON",
          data: geojsonData,
        })
        setLoadedMap(true)
      },
    })

  }, [points])

  const cf = sceneRef.current && sceneRef.current.config

  useEffect(() => {
    if (!mapFocus) return
    leafletMap.current.flyTo(mapFocus, mapZoom || 5, { easeLinearity: 0.01, duration: 1.5 })
  }, [mapFocus, mapZoom])

  useEffect(() => {
    if (!currentDate || !sceneRef.current || !sceneRef.current.config) return
    if (currentDate === sceneRef.current.config.global.currentDate) return
    sceneRef.current.config.global.currentDate = currentDate
    sceneRef.current.updateConfig()
  }, [currentDate, cf])

  useEffect(() => {
    if (!sceneRef.current || !sceneRef.current.config) return
    sceneRef.current.config.global.currentDataType = currentDataType || 0
    sceneRef.current.config.global.prefix = currentDataType === 0
      ? ""
      : currentDataType === 1
        ? "deaths_"
        : "recoveries_"
    sceneRef.current.updateConfig()
  }, [currentDataType, cf])

  const handleZoomIn = () => {
    leafletMap.current.zoomIn()
  }

  const handleZoomOut = () => {
    leafletMap.current.zoomOut()
  }

  return (
    <>
      <Box
        ref={mapRef}
        top="0"
        left={[0, null, "25rem", "30rem"]}
        right="0"
        bottom="0"
        style={{ position: "fixed", transition: "opacity 500ms", opacity: loadedMap ? 1 : 0 }}
      />

      {
        !loadedMap ? (
          <Box
            position="fixed"
            top="50%"
            left={["50%", null, "calc((100% + 25rem) / 2)", "calc((100% + 30rem) / 2)"]}
            zIndex={9999}
            transform="translateX(-50%)"
          >
            <Icon
              name="spinner"
              size="2.5rem"
              color="gray.500"
              animation={`${rotate} 1s linear infinite`}
              mx="auto"
              display="block"
            />
            <Text textAlign="center" color="gray.500" mx="auto" fontSize="sm" mt="0.75rem">
              { "Loading map" }
            </Text>
          </Box>
        ) : null
      }
      
      <Box
        position="fixed"
        bottom={["6rem", "8rem", "5rem"]}
        left={["auto", null, "26.5rem", "32.5rem"]}
        right={["2.75rem", "3.75rem", "auto"]}
        zIndex={2}
        pointerEvents={["none", null, "all"]}
      >

        <Stack spacing="0.5rem" alignItems="center" mb={["6.5rem", null, "1.25rem"]}>
          <Text color="gray.600" width="2.5rem" textAlign="center" fontWeight={700} fontSize="xs" lineHeight="shorter">
            { "more cases" }
          </Text>
          <Box width="2.5rem" height="2.5rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
          <Box width="1.25rem" height="1.25rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
          <Box width="0.625rem" height="0.625rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
          <Text color="gray.600" width="2.5rem" textAlign="center" fontWeight={700} fontSize="xs" lineHeight="shorter">
            { "fewer cases" }
          </Text>
        </Stack>

        <Stack display={["none", null, "block"]} spacing="1.25rem">
          <Flex justifyContent="center">
            <Flex alignItems="center" direction="column" shadow="lg" borderRadius="md">
              <IconButton 
                onClick={handleZoomIn}
                icon="add" bg="white"
                borderRadius="0.25rem 0.25rem 0 0"
                border="0.0625rem solid"
                borderColor="transparent"
                  _hover={{ borderColor: "transparent" }}
                  _focus={{ borderColor: "rgba(236,97,14, 1)", boxShadow: `0 0 0 0.0625rem rgba(236,97,14, 1), 0 0 0 0.25rem rgba(236,97,14, 0.25)` }}
                  _placeholder={{ color: "gray.500" }}
              />
              <Box height="1px" width="100%" bg="gray.100" />
              <IconButton 
                onClick={handleZoomOut}
                icon="minus"
                bg="white"
                borderRadius="0 0 0.25rem 0.25rem"
                border="0.0625rem solid"
                borderColor="transparent"
                  _hover={{ borderColor: "transparent" }}
                  _focus={{ borderColor: "rgba(236,97,14, 1)", boxShadow: `0 0 0 0.0625rem rgba(236,97,14, 1), 0 0 0 0.25rem rgba(236,97,14, 0.25)` }}
                  _placeholder={{ color: "gray.500" }}
              />
            </Flex>
          </Flex>
        </Stack>
      </Box>
    </>
  )
}