PackageHeader PackageHeader.tsx

0% Statements 0/5

0% Branches 0/4

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
39
40
41
42
43
44
45
46  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Divider, Flex, Spinner } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { Details } from "./Details";
import { HeaderContainer, GRID_AREAS } from "./HeaderContainer";
import { Heading } from "./Heading";
import { Install } from "./Install";
import { LanguageSelection } from "../LanguageSelection";
import { usePackageState } from "../PackageState";
 
export const PackageHeader: FunctionComponent = () => {
  const { assembly, metadata, version } = usePackageState();
 
  const { data: asm } = assembly;
  const { data: meta } = metadata;
 
  return asm && meta ? (
    <HeaderContainer>
      <Heading
        assembly={asm}
        description={asm.description}
        gridArea={GRID_AREAS.HEADING}
        metadata={meta}
        name={asm.name}
        version={version}
      />
      <Flex align="start" gridArea={GRID_AREAS.LANGUAGES}>
        <LanguageSelection />
      </Flex>
 
      <Flex direction="column" gridArea={GRID_AREAS.META}>
        <Divider borderBottom="base" display={{ md: "none" }} mb={2} />
 
        <Details />
 
        <Divider borderBottom="base" display={{ md: "none" }} mt={2} />
      </Flex>
 
      <Flex align="start" gridArea={GRID_AREAS.INSTALL}>
        <Install />
      </Flex>
    </HeaderContainer>
  ) : (
    <Spinner mx="auto" my={10} size="xl" />
  );
};