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 | import {
Grid,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
} from "@chakra-ui/react";
import { FunctionComponent, useState, useEffect } from "react";
import { PACKAGE_ANALYTICS } from "./constants";
import { DependenciesList } from "./DependenciesList";
import { FeedbackLinks } from "./FeedbackLinks";
import { PackageDocs } from "./PackageDocs";
import { PackageHeader } from "./PackageHeader";
import { usePackageState } from "./PackageState";
import { ShareInfo } from "./ShareInfo";
import testIds from "./testIds";
import { Page } from "../../components/Page";
export const PackageLayout: FunctionComponent = () => {
const { pageDescription, pageTitle } = usePackageState();
const [tabIndex, setTabIndex] = useState(0);
useEffect(() => {
setTabIndex(0);
}, [pageTitle]);
return (
<Page
meta={{ title: pageTitle, description: pageDescription }}
pageName="packageProfile"
>
<Grid
bg="bgPrimary"
data-testid={testIds.page}
maxW="100vw"
templateColumns="1fr"
templateRows="auto 1fr auto"
>
<PackageHeader />
<Tabs index={tabIndex} onChange={setTabIndex} variant="line">
<TabList bg="bgSecondary" borderBottom="base" px={{ base: 0, lg: 6 }}>
<Tab data-event={PACKAGE_ANALYTICS.DOCUMENTATION.TAB}>
Documentation
</Tab>
<Tab
data-event={PACKAGE_ANALYTICS.DEPENDENCIES.TAB}
data-testid={testIds.dependenciesTab}
>
Dependencies
</Tab>
<Tab
data-event={PACKAGE_ANALYTICS.GITHUB_BADGE.TAB}
data-testid={testIds.badgeTab}
>
Share
</Tab>
</TabList>
<TabPanels maxW="full">
<TabPanel p={0}>
<PackageDocs />
</TabPanel>
<TabPanel>
<DependenciesList />
</TabPanel>
<TabPanel>
<ShareInfo />
</TabPanel>
</TabPanels>
</Tabs>
<FeedbackLinks />
</Grid>
</Page>
);
};
|