PackageHeader HeaderContainer.tsx

0% Statements 0/5

100% Branches 0/0

0% Functions 0/1

0% Lines 0/5

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Grid } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { makeGridAreas } from "../../../util/css";
 
export const GRID_AREAS = {
  HEADING: "heading",
  INSTALL: "install",
  LANGUAGES: "languages",
  META: "meta",
};
 
const baseGridAreas = makeGridAreas(
  [GRID_AREAS.HEADING],
  [GRID_AREAS.META],
  [GRID_AREAS.LANGUAGES],
  [GRID_AREAS.INSTALL]
);
 
const lgGridAreas = makeGridAreas(
  [GRID_AREAS.HEADING, GRID_AREAS.LANGUAGES, GRID_AREAS.INSTALL],
  [GRID_AREAS.HEADING, null, GRID_AREAS.META]
);
 
export const HeaderContainer: FunctionComponent = ({ children }) => (
  <Grid
    bg="bgSecondary"
    columnGap={{ md: 6, lg: 10 }}
    pt={{ base: 3, lg: 6 }}
    px={{ base: 5, md: 6, lg: 10 }}
    rowGap={{ base: 4, lg: 0 }}
    templateAreas={{ base: baseGridAreas, lg: lgGridAreas }}
    templateColumns={{ base: "1fr", lg: "1fr auto 15rem" }}
    templateRows={{ lg: "auto 1fr" }}
  >
    {children}
  </Grid>
);