/** @jsx jsx */ import React, { useEffect, useState } from "react" import { Link } from "gatsby" import PropTypes from "prop-types" import { jsx, Box, Flex } from "theme-ui" const Header = ({ siteTitle }) => ( <header sx={{ marginBottom: `1.45rem`, }} > <Flex sx={{ padding: "7vh 7vw 0vh 7vw", paddingBottom: ["7vh", "7vh", "7vh", "7vh", "0vh"], maxWidth: "100%", justifyContent: ["center", "center", "left", "left", "left"], }} > <Box sx={{ display: "flex", alignItems: "center", justifyContent: ["center", "center", "left", "left", "left"], width: "65%", }} > <h2 sx={{ margin: 0, fontSize: ["1.7rem", "2rem", "1.5rem", "2rem", "1.8rem"], }} > <Link to="/" sx={{ color: "primary", textDecoration: `none`, fontFamily: "body", }} > {siteTitle} </Link> </h2> </Box> <Box sx={{ display: ["none", "none", "flex", "flex", "flex"], alignItems: "center", justifyContent: "flex-end", width: "10%", }} > <h3 sx={{ marginBottom: "0px", color: "white", fontFamily: "body", fontSize: ["0.8rem", "0.8rem", "1rem", "1.2rem", "1.3rem"], }} > <a href="#description" style={{ textDecoration: "none", color: "white", }} > About </a> </h3> </Box> <Box sx={{ display: ["none", "none", "flex", "flex", "flex"], alignItems: "center", justifyContent: "flex-end", width: "12%", }} > <h3 sx={{ marginBottom: "0px", fontFamily: "body", fontSize: ["0.8rem", "0.8rem", "1rem", "1.2rem", "1.3rem"], }} > <a target="_blank" rel="noreferrer" href="https://github.com/gojek/ziggurat" style={{ color: "white", textDecoration: "none", }} > Source </a> </h3> </Box> <Box sx={{ display: ["none", "none", "flex", "flex", "flex"], alignItems: "center", justifyContent: "flex-end", width: "10%", }} > <h3 sx={{ marginBottom: "0px", color: "white", fontFamily: "body", fontSize: ["0.8rem", "0.8rem", "1rem", "1.2rem", "1.3rem"], }} > <a href="/docs/home" style={{ color: "white", textDecoration: "none", }} > Docs </a> </h3> </Box> </Flex> </header> ) Header.propTypes = { siteTitle: PropTypes.string, } Header.defaultProps = { siteTitle: ``, } export default Header