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