dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2
@reggi/path-to-regexp
dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2
dependabot/npm_and_yarn/main/eslint-10.4.0
dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0
dependabot/npm_and_yarn/main/proc-log-7.0.0
dependabot/npm_and_yarn/npm_and_yarn-826852524d
dependabot/npm_and_yarn/npm_and_yarn-ab9a7f4bc2
deprecate-totp-2fa
dhei/classic-tokens
gat-bypass-2fa-docs
jpg619/fix-accessibility-content-flow
jpg619/version-bump-tar-2
kartykp/gat-bypass-2fa-docs
kartykp/upgrade-path-to-regex
main
maitxn/version-bump-tar
patch-1
reggi/cache-based-on-version
reggi/dev-engines
reggi/fix-transform-prettier
reggi/overrides
update-search-sensitivity
| 1 | import React from 'react' |
| 2 | import {Heading, Text} from '@primer/react' |
| 3 | import {h1 as H1} from './mdx' |
| 4 | import PageFooter from './components/page-footer' |
| 5 | import * as TableOfContents from './components/table-of-contents' |
| 6 | import VariantSelect from './components/variant-select' |
| 7 | import Breadcrumbs from './components/breadcrumbs' |
| 8 | import useSiteMetadata from './hooks/use-site-metadata' |
| 9 | import usePage from './hooks/use-page' |
| 10 | import {DarkTheme} from './theme' |
| 11 | import {SkipNav} from './components/skip-nav' |
| 12 | |
| 13 | import * as styles from './layout.module.css' |
| 14 | import {clsx} from 'clsx' |
| 15 | |
| 16 | const Container = ({className, ...props}) => <div className={clsx(styles.Box, className)} {...props} /> |
| 17 | |
| 18 | const HeroLayout = ({children}) => { |
| 19 | const {title, description} = useSiteMetadata() |
| 20 | |
| 21 | return ( |
| 22 | <main className={styles.Box_1}> |
| 23 | <DarkTheme className={styles.DarkTheme}> |
| 24 | <Container className={styles.Container}> |
| 25 | <Heading as="h1" className={styles.Heading}> |
| 26 | {title} |
| 27 | </Heading> |
| 28 | <Text as="p" className={styles.Text}> |
| 29 | {description} |
| 30 | </Text> |
| 31 | </Container> |
| 32 | </DarkTheme> |
| 33 | <SkipNav /> |
| 34 | <Container className={styles.Container}>{children}</Container> |
| 35 | </main> |
| 36 | ) |
| 37 | } |
| 38 | |
| 39 | const DefaultLayout = ({children}) => { |
| 40 | const {title, description} = usePage().frontmatter |
| 41 | return ( |
| 42 | <div className={styles.Box_2}> |
| 43 | <Container as="main"> |
| 44 | <div className={styles.Box_3}> |
| 45 | <Breadcrumbs /> |
| 46 | <H1 autolink={false}>{title}</H1> |
| 47 | {description ? <div className={styles.Box_4}>{description}</div> : null} |
| 48 | </div> |
| 49 | <SkipNav /> |
| 50 | <VariantSelect /> |
| 51 | <TableOfContents.Mobile /> |
| 52 | {children} |
| 53 | <PageFooter /> |
| 54 | </Container> |
| 55 | <TableOfContents.Desktop /> |
| 56 | </div> |
| 57 | ) |
| 58 | } |
| 59 | |
| 60 | const Layout = ({children}) => React.createElement(usePage().path === '/' ? HeroLayout : DefaultLayout, null, children) |
| 61 | |
| 62 | export default Layout |