Package ShareInfo.tsx

0% Statements 0/14
0% Branches 0/2
0% Functions 0/2
0% Lines 0/14
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import {
  Box,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Image,
  Text,
} from "@chakra-ui/react";
import { FunctionComponent, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { usePackageState } from "./PackageState";
import { Code } from "../../components/Code";
import { getPackagePath } from "../../util/url";
 
export const ShareInfo: FunctionComponent = () => {
  const [tabIndex, setTabIndex] = useState(0);
 
  const { scope, name } = usePackageState();
  const pkgName = scope ? `${scope}/${name}` : name;
  const encodedName = encodeURIComponent(pkgName);
 
  useEffect(() => {
    setTabIndex(0);
  }, []);
 
  const baseUrl = window.location.hostname; // e.g. "constructs.dev"
  const packagePath = getPackagePath({ name: pkgName });
 
  const imageUrl = `https://${baseUrl}/badge?package=${encodedName}`;
  const linkUrl = `https://${baseUrl}${packagePath}`;
  const markdown = `[![View on Construct Hub](${imageUrl})](${linkUrl})`;
  const html = `<a href="${linkUrl}"><img src="${imageUrl}" alt="View on Construct Hub"/></a>`;
 
  return (
    <Box bg="bgPrimary" py={1} width="100%">
      <Text pb={3}>
        Use the snippets below in your Git repositories or elsewhere to add a
        button that links to this package. The button will automatically update
        to light mode or dark mode based on whether the user&apos;s client has
        requested a light or dark theme.
      </Text>
      <Link to={packagePath}>
        <Image src="/badge-dynamic.svg" />
      </Link>
 
      <Tabs index={tabIndex} my={3} onChange={setTabIndex} variant="line">
        <TabList borderBottom="base" px={{ base: 0, lg: 6 }}>
          <Tab>Markdown</Tab>
          <Tab>HTML</Tab>
        </TabList>
        <TabPanels maxW="full">
          <TabPanel>
            <Code
              boxShadow="none"
              code={markdown}
              fontSize="inherit"
              language={"markdown"}
              mt={2}
            />
          </TabPanel>
 
          <TabPanel>
            <Code
              boxShadow="none"
              code={html}
              fontSize="inherit"
              language={"markdown"}
              mt={2}
            />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
};