@chakra-ui/core#Box JavaScript Examples

export default function Breadcrumbs({ items }) {
  return (
    <Breadcrumb
      m="6"
      spacing="1"
      separator={<Box size="1em" as={ChevronsRight} color="gray.300" />}
    >
      {items.map((item, index) => {
        const isCurrentPage = items.length === index + 1;
        return (
          <BreadcrumbItem isCurrentPage={isCurrentPage} key={item.label}>
            <BreadcrumbLink
              as={!isCurrentPage ? Link : undefined}
              to={!isCurrentPage ? item.to : undefined}
            >
              {item.label}
            </BreadcrumbLink>
          </BreadcrumbItem>
        );
      })}
    </Breadcrumb>
  );
}

ChartSquareBar = (props) => (
  <Box as="svg" fill="currentColor" viewBox="0 0 20 20" {...props}>
    <path
      fillRule="evenodd"
      d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm9 4a1 1 0 10-2 0v6a1 1 0 102 0V7zm-3 2a1 1 0 10-2 0v4a1 1 0 102 0V9zm-3 3a1 1 0 10-2 0v1a1 1 0 102 0v-1z"
      clipRule="evenodd"
    />
  </Box>
)

function Map({ location }) {
  return (
    <AspectRatioBox ratio={16 / 5}>
      <Box
        as="iframe"
        src={`https://maps.google.com/maps?q=${location.latitude}, ${location.longitude}&z=15&output=embed`}
        alt="demo"
      />
    </AspectRatioBox>
  );
}

BlinkingDot = () => {
  return (
    <Box
      animation={`${blink} 1s linear infinite alternate`}
      width="0.5rem"
      height="0.5rem"
      bg="#ec610e"
      mr="0.25rem"
      borderRadius="100%"
    />
  )
}

function LocationAndVehicles({ launchPad }) {
  return (
    <SimpleGrid columns={[1, 1, 2]} borderWidth="1px" p="4" borderRadius="md">
      <Stat>
        <StatLabel display="flex">
          <Box as={MapPin} width="1em" />{" "}
          <Box ml="2" as="span">
            Location
          </Box>
        </StatLabel>
        <StatNumber fontSize="xl">{launchPad.location.name}</StatNumber>
        <StatHelpText>{launchPad.location.region}</StatHelpText>
      </Stat>
      <Stat>
        <StatLabel display="flex">
          <Box as={Navigation} width="1em" />{" "}
          <Box ml="2" as="span">
            Vehicles
          </Box>
        </StatLabel>
        <StatNumber fontSize="xl">
          {launchPad.vehicles_launched.join(", ")}
        </StatNumber>
      </Stat>
    </SimpleGrid>
  );
}

Calendar = (props) => (
  <Box as="svg" fill="currentColor" viewBox="0 0 20 20" {...props}>
    <path
      fillRule="evenodd"
      d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
      clipRule="evenodd"
    />
  </Box>
)

DataTypeSwitch = ({ rows }) => {
  const updateDataType = useDataTypeStore(state => state.updateDataType)
  const handleTabChange = (val) => {
    updateDataType(val)
  }
  return (
    <Tabs variantColor="orange" mt="1.25rem" onChange={handleTabChange}>
      <TabList>
        <Tab width={1/3} justifyContent="flex-start" pl="1.25rem" color="gray.600" _selected={{ borderColor: "#ec610e", color: "#ec610e" }}>
          <Box textAlign="left">
            <SumStat points={rows} prefix="" text="Confirmed" />
          </Box>
        </Tab>
        <Tab width={1/3} justifyContent="flex-start" pl="1.25rem" color="gray.600" _selected={{ borderColor: "#ec610e", color: "#ec610e" }}>
          <Box textAlign="left">
            <SumStat points={rows} prefix="deaths_" text="Deaths" />
          </Box>
        </Tab>
        <Tab width={1/3} justifyContent="flex-start" pl="1.25rem" color="gray.600" _selected={{ borderColor: "#ec610e", color: "#ec610e" }}>
          <Box textAlign="left">
            <SumStat points={rows} prefix="recoveries_" text="Recoveries" />
          </Box>
        </Tab>
      </TabList>
    </Tabs>
  )
}

Github = (props) => (
  <Box
    as="svg"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    viewBox="0 0 24 24"
    {...props}
  >
    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
  </Box>
)

function PageLink({ url, children, ...rest }) {
  return (
    <Link as={BrowserLink} to={url} {...rest}>
      <Flex
        justifyContent="space-between"
        p="6"
        boxShadow="md"
        borderWidth="1px"
        rounded="lg"
      >
        <Text fontSize="lg">{children}</Text>
        <Box as={ArrowRight} />
      </Flex>
    </Link>
  );
}

NavigationTabs = () => {
  const updateTab = useTabStore(state => state.updateTab)
  const currentTab = useTabStore(state => state.currentTab)

  const handleTabChange = index => {
    updateTab(index)
  }

  return (
    <Box
      display={["block", null, "none"]}
      position="fixed"
      bottom="0"
      left="0"
      right="0"
      bg="white"
      zIndex={999999}
      boxShadow="0 -0.25rem 0.75rem rgba(0,0,0,0.1)"
    >
      <Tabs variantColor="orange" onChange={handleTabChange} defaultIndex={1} index={currentTab}>
        <TabList display="flex" justifyContent="space-between">
          <Tab width={1/3} height="3rem" fontWeight={600} _focus={{ boxShadow: "none" }}>
            <Icon name="list" mr="0.25rem"/>
            { "Cases" }
          </Tab>
          <Tab width={1/3} height="3rem" fontWeight={600} _focus={{ boxShadow: "none" }}>
            <Icon name="globe" mr="0.25rem"/>
            { "Map" }
          </Tab>
          <Tab width={1/3} height="3rem" fontWeight={600} _focus={{ boxShadow: "none" }}>
            <Icon name="info" mr="0.25rem"/>
            { "About" }
          </Tab>
        </TabList>
      </Tabs>
    </Box>
  )
}

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

Twitter = (props) => (
  <Box
    as="svg"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    viewBox="0 0 24 24"
    {...props}
  >
    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
  </Box>
)

Layout = ({ children }) => (
  <div>
    <Grid style={{ margin: `0 auto` }} maxW="90%" w={900} alignSelf="center">
      <Box mb={10} mt={20}>
        <Header />
      </Box>
      <Menu />

      <Box mb={100}>{children}</Box>
    </Grid>
  </div>
)

Menu = (props) => (
  <Box as="svg" fill="currentColor" viewBox="0 0 20 20" {...props}>
    <path
      fillRule="evenodd"
      d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
      clipRule="evenodd"
    />
  </Box>
)

function Video({ launch }) {
  return (
    <AspectRatioBox maxH="400px" ratio={1.7}>
      <Box
        as="iframe"
        title={launch.mission_name}
        src={`https://www.youtube.com/embed/${launch.links.youtube_id}`}
        allowFullScreen
      />
    </AspectRatioBox>
  );
}

Mail = (props) => (
  <Box
    as="svg"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth="2"
    {...props}
  >
    <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
  </Box>
)

function TimeAndLocation({ launch }) {
  return (
    <SimpleGrid columns={[1, 1, 2]} borderWidth="1px" p="4" borderRadius="md">
      <Stat>
        <StatLabel display="flex">
          <Box as={Watch} width="1em" />{" "}
          <Box ml="2" as="span">
            Launch Date
          </Box>
        </StatLabel>
        <StatNumber fontSize={["md", "xl"]}>
          {formatDateTime(launch.launch_date_local)}
        </StatNumber>
        <StatHelpText>{timeAgo(launch.launch_date_utc)}</StatHelpText>
      </Stat>
      <Stat>
        <StatLabel display="flex">
          <Box as={MapPin} width="1em" />{" "}
          <Box ml="2" as="span">
            Launch Site
          </Box>
        </StatLabel>
        <StatNumber fontSize={["md", "xl"]}>
          <Link
            as={RouterLink}
            to={`/launch-pads/${launch.launch_site.site_id}`}
          >
            {launch.launch_site.site_name_long}
          </Link>
        </StatNumber>
        <StatHelpText>{launch.launch_site.site_name}</StatHelpText>
      </Stat>
    </SimpleGrid>
  );
}

Inbox = (props) => (
  <Box as="svg" fill="currentColor" viewBox="0 0 20 20" {...props}>
    <path
      fillRule="evenodd"
      d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z"
      clipRule="evenodd"
    />
  </Box>
)

export default function Launch() {
  let { launchId } = useParams();
  const { data: launch, error } = useSpaceX(`/launches/${launchId}`);

  if (error) return <Error />;
  if (!launch) {
    return (
      <Flex justifyContent="center" alignItems="center" minHeight="50vh">
        <Spinner size="lg" />
      </Flex>
    );
  }

  return (
    <div>
      <Breadcrumbs
        items={[
          { label: "Home", to: "/" },
          { label: "Launches", to: ".." },
          { label: `#${launch.flight_number}` },
        ]}
      />
      <Header launch={launch} />
      <Box m={[3, 6]}>
        <TimeAndLocation launch={launch} />
        <RocketInfo launch={launch} />
        <Text color="gray.700" fontSize={["md", null, "lg"]} my="8">
          {launch.details}
        </Text>
        <Video launch={launch} />
        <Gallery images={launch.links.flickr_images} />
      </Box>
    </div>
  );
}

Messages = () => {
  const {
    messages,
    getOneMessage,
    hasMoreMessages,
    loadMoreMessages,
  } = useContext(EmailContext);

  const handleMessageClick = (e) => {
    const messageId = e.currentTarget.getAttribute("id");
    getOneMessage(messageId);
  };

  return (
    <Box overflowY='auto' id='scrollableDiv'>
      <InfiniteScroll
        dataLength={messages.length}
        next={loadMoreMessages}
        hasMore={hasMoreMessages}
        loader={<h4>Loading...</h4>}
        scrollableTarget='scrollableDiv'
      >
        {messages.map((message, index) => (
          <EmailRow
            key={index}
            message={message}
            handleMessageClick={handleMessageClick}
          />
        ))}
      </InfiniteScroll>
    </Box>
  );
}

Crosshair = () => {
  const size = 24;
  const line = { position: "absolute", background: "gray" };

  return (
    <Box
      position="absolute"
      top="50%"
      left="50%"
      w={`${size}px`}
      h={`${size}px`}
      mt={`-${size / 2}px`}
      ml={`-${size / 2}px`}
    >
      {/* Top */}
      <Box {...line} w="2px" h="40%" left="50%" ml="-1px" />
      {/* Right */}
      <Box {...line} w="40%" h="2px" top="50%" right="0px" mt="-1px" />
      {/* Bottom */}
      <Box {...line} w="2px" h="40%" bottom="0px" left="50%" ml="-1px" />
      {/* Left */}
      <Box {...line} w="40%" h="2px" top="50%" mt="-1px" />
    </Box>
  );
}

ClipboardList = (props) => (
  <Box as="svg" fill="currentColor" viewBox="0 0 20 20" {...props}>
    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
    <path
      fillRule="evenodd"
      d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
      clipRule="evenodd"
    />
  </Box>
)

Section = (props) => (
  <Box
    as="section"
    paddingX={["1rem", "4.5rem"]}
    backgroundColor="white"
    {...props}
  >
    {props.children}
  </Box>
)

Folder = (props) => (
  <Box as="svg" fill="currentColor" viewBox="0 0 20 20" {...props}>
    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
  </Box>
)

render() {
    const { location, title, children } = this.props
    const rootPath = `${__PATH_PREFIX__}/`
    let header

    if (location.pathname === rootPath) {
      header = (
        <h1
          style={{
            marginTop: 0,
          }}
        >
          <Link
            style={{
              boxShadow: `none`,
              textDecoration: `none`,
              color: `inherit`,
            }}
            to={`/`}
          >
            {title}
          </Link>
        </h1>
      )
    } else {
      header = (
        <h3
          style={{
            fontFamily: `Montserrat, sans-serif`,
            marginTop: 0,
          }}
        >
          <Link
            style={{
              boxShadow: `none`,
              textDecoration: `none`,
              color: `inherit`,
            }}
            to={`/`}
          >
            {title}
          </Link>
        </h3>
      )
    }
    return (
      <Box background="#EDF2F7" minHeight="100vh">
        <Header location={this.props.location} />
        <Box
          as="a"
          p={5}
          href="https://www.producthunt.com/posts/opensource-builders?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-opensource-builders"
          target="_blank"
          position="fixed"
          bottom={0}
          right={0}
          zIndex={2}
        >
          <Box
            as="img"
            src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=185805&theme=dark"
            alt="Opensource Builders - Find open-source alternatives to commercial apps | Product Hunt Embed"
            width="200px"
          />
        </Box>
        {/* <header>{header}</header> */}
        <Box as="main" height="100%">
          {children}
        </Box>
      </Box>
    )
  }

export function LaunchItem({ launch }) {
  return (
    <Box
      as={Link}
      to={`/launches/${launch.flight_number.toString()}`}
      boxShadow="md"
      borderWidth="1px"
      rounded="lg"
      overflow="hidden"
      position="relative"
    >
      <Image
        src={
          launch.links.flickr_images[0]?.replace("_o.jpg", "_z.jpg") ??
          launch.links.mission_patch_small
        }
        alt={`${launch.mission_name} launch`}
        height={["200px", null, "300px"]}
        width="100%"
        objectFit="cover"
        objectPosition="bottom"
      />

      <Image
        position="absolute"
        top="5"
        right="5"
        src={launch.links.mission_patch_small}
        height="75px"
        objectFit="contain"
        objectPosition="bottom"
      />

      <Box p="6">
        <Box d="flex" alignItems="baseline">
          {launch.launch_success ? (
            <Badge px="2" variant="solid" variantColor="green">
              Successful
            </Badge>
          ) : (
            <Badge px="2" variant="solid" variantColor="red">
              Failed
            </Badge>
          )}
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {launch.rocket.rocket_name} &bull; {launch.launch_site.site_name}
          </Box>
        </Box>

        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          {launch.mission_name}
        </Box>
        <Flex>
          <Text fontSize="sm">{formatDate(launch.launch_date_utc)} </Text>
          <Text color="gray.500" ml="2" fontSize="sm">
            {timeAgo(launch.launch_date_utc)}
          </Text>
        </Flex>
      </Box>
    </Box>
  );
}

ProfilePageReview = ({ userReviews }) => {
  const isLoading = useSelector((state) => state.user.isLoading)
  const under = { textDecoration: 'underline' }

  return (
    <Flex justify="center" mt=".5%" mb="2%">
      {!isLoading ? (
        <Box
          width="1048px"
          style={{ border: '1px solid #e6e5e5', padding: '3%' }}
        >
          {userReviews && userReviews.length > 0 ? (
            userReviews.map((review) => {
              const postedOn = dateConvert(review.created_at)
              return (
                <AccordionItem
                  key={review.review_id}
                  width="816px"
                  style={{ margin: '0 auto' }}
                >
                  <AccordionHeader
                    style={{ borderRadius: '10px ' }}
                    _expanded={{ bg: '#007F00', color: 'white' }}
                  >
                    <Box flex="1" textAlign="left">
                      <span
                        style={{
                          borderRadius: '35%',
                          backgroundColor: '#a5a5a5',
                          padding: '.5%',
                        }}
                      >
                        Interview
                      </span>{' '}
                      posted at {postedOn}
                    </Box>
                    <AccordionIcon />
                  </AccordionHeader>
                  <AccordionPanel>
                    <h6>
                      <i style={under}>{review.work_status}</i> at{' '}
                      <i style={under}>{review.company_name}</i> in{' '}
                      <i style={under}>{review.city}</i>
                    </h6>
                  </AccordionPanel>
                  <AccordionPanel>
                    <h5>Review:</h5> <span>{review.comment}</span>
                  </AccordionPanel>
                </AccordionItem>
              )
            })
          ) : (
            <span>no reviews</span>
          )}
        </Box>
      ) : null}
    </Flex>
  )
}

EmailRow = ({ message, handleMessageClick }) => {
  // Get name of email sender
  const name = removeQuote(
    getHeader(message.payload.headers, "From").split("<")[0]
  );

  // Get subject of email
  const subject = getHeader(message.payload.headers, "Subject");

  // Get part of email snippet
  const msg = decodeHtml(message.snippet.substr(0, 75));

  // Set backgroundColor to white if the mail is not yet opened
  const backgroundColor =
    message.labelIds.indexOf("UNREAD") > -1 ? "#fff" : "#E2E8F0";

  return (
    <Flex
      key={message.id}
      id={message.id}
      onClick={handleMessageClick}
      wrap='no-wrap'
      justify='space-around'
      py={2}
      bg={backgroundColor}
      borderTop='1px'
      borderBottom='1px'
      borderColor='gray.300'
      cursor='pointer'
    >
      <Avatar name={name} src='https://bit.ly/tioluwani-kolawole' />
      <Box w='80%'>
        <Text fontSize='sm' color='gray.700' isTruncated>
          {name}
        </Text>
        <Text fontSize='md' fontWeight='bold' color='#3182ce' isTruncated>
          {subject}
        </Text>
        <Text fontSize='xs' color='gray.500'>
          {msg}
        </Text>
      </Box>
    </Flex>
  );
}