@cryptotaxi247 / documentation-1
Code Commits Issues Pulls Sessions CI/CD
reggi/dev-engines
@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
js 69 lines 2.07 KB
Raw
1 import React from 'react'
2 import {Box, 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 const Container = ({sx, ...props}) => <Box sx={{width: '100%', maxWidth: '960px', ...sx}} {...props} />
14
15 const HeroLayout = ({children}) => {
16 const {title, description} = useSiteMetadata()
17
18 return (
19 <Box as="main" sx={{width: '100%'}}>
20 <DarkTheme sx={{bg: 'canvas.inset', py: [0, 4, 5, 6]}}>
21 <Container sx={{p: 5, mx: 'auto'}}>
22 <Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
23 {title}
24 </Heading>
25 <Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
26 {description}
27 </Text>
28 </Container>
29 </DarkTheme>
30 <SkipNav />
31 <Container sx={{p: 5, mx: 'auto'}}>{children}</Container>
32 </Box>
33 )
34 }
35
36 const DefaultLayout = ({children}) => {
37 const {title, description} = usePage().frontmatter
38 return (
39 <Box
40 sx={{
41 justifyContent: 'center',
42 flexDirection: 'row-reverse',
43 display: 'flex',
44 maxWidth: '1200px',
45 mx: 'auto',
46 width: '100%',
47 p: [4, 5, 6, 7],
48 }}
49 >
50 <TableOfContents.Desktop />
51 <Container as="main">
52 <Box sx={{mb: 4}}>
53 <Breadcrumbs />
54 <H1 autolink={false}>{title}</H1>
55 {description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
56 </Box>
57 <SkipNav />
58 <VariantSelect />
59 <TableOfContents.Mobile />
60 {children}
61 <PageFooter />
62 </Container>
63 </Box>
64 )
65 }
66
67 const Layout = ({children}) => React.createElement(usePage().path === '/' ? HeroLayout : DefaultLayout, null, children)
68
69 export default Layout