Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import { Box, Grid, GridItem, GridItemProps } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { HEADER_ANALYTICS } from "./constants";
import { DocumentationDropdown } from "./DocumentationDropdown";
import { GettingStartedDropdown } from "./GettingStartedDropdown";
import { HeaderSearch } from "./HeaderSearch";
import { NavButton } from "./NavButton";
import testIds from "./testIds";
import { Title } from "./Title";
import { ROUTES } from "../../constants/url";
import { NavLink } from "../NavLink";
const HeaderItem: FunctionComponent<GridItemProps> = (props) => (
<GridItem align="center" justify="center" rowStart={1} {...props} />
);
export const Header: FunctionComponent = () => {
return (
<Grid
alignItems="center"
as="header"
bg="bgSecondary"
boxShadow="base"
data-testid={testIds.container}
gap={6}
gridTemplateColumns={{
base: "1fr max-content 1fr",
lg: "max-content minmax(12rem, 31rem) auto",
}}
gridTemplateRows="1fr"
maxW="100vw"
position="sticky"
px={4}
py={4}
top={0}
w="100%"
zIndex="sticky"
>
{/* Logo / Header */}
<HeaderItem
colStart={{ base: 2, lg: 1 }}
justifySelf={{ base: "center", lg: "start" }}
>
<Title />
</HeaderItem>
{/* Search Trigger */}
<HeaderItem
colStart={{ base: 3, lg: 2 }}
justifySelf={{ base: "end", lg: "stretch" }}
>
<HeaderSearch />
</HeaderItem>
{/* Navigation */}
<HeaderItem
colStart={{ base: 1, lg: 3 }}
justifySelf={{ base: "start", lg: "end" }}
>
<Grid
display={{ base: "none", lg: "grid" }}
gap={4}
gridTemplateRows="1fr"
placeItems="center"
templateColumns="1fr 1fr auto"
w="100%"
>
<Box>
<GettingStartedDropdown />
</Box>
<Box>
<DocumentationDropdown />
</Box>
<NavLink
color="textPrimary"
data-event={HEADER_ANALYTICS.CONTRIBUTE_LINK}
fontWeight="500"
to={ROUTES.CONTRIBUTE}
>
Contribute
</NavLink>
</Grid>
<NavButton />
</HeaderItem>
</Grid>
);
};
|