css.gui/apps/docs/pages/_app.tsx at main · iCodeIN/css.gui · GitHub

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
import { AppProps } from 'next/app'
import { NextRouter, useRouter } from 'next/router'
import { ReactChild } from 'react'
import { ThemeProvider } from 'theme-ui'
import {
  ThemeProvider as EditorThemeProvider,
  theme,
  importTheme,
} from '@compai/css-gui'
import { Sidebar } from '../components/Sidebar'
import { PageWrap } from '../components/PageWrap'
import { Layout } from '../components/Layout'
import { Layout as PlaygroundLayout } from '../components/playground/Layout'
import { Head } from '../components/Head'
import '../public/code-styles.css'

const NO_NAV_PAGES: Record<string, boolean> = {
  '/playground': true,
  '/html-editor': true,
  '/dev': true,
}
const isNoNavPage = (router: NextRouter) => {
  if (router.pathname.startsWith('/library')) {
    return true
  }

  return NO_NAV_PAGES[router.pathname] ?? false
}

type DocsLayoutProps = {
  children: ReactChild
}
const DocsLayout = ({ children }: DocsLayoutProps) => {
  return (
    <Layout>
      <Sidebar />
      <PageWrap>{children}</PageWrap>
    </Layout>
  )
}

const App = ({ Component, pageProps }: AppProps) => {
  const router = useRouter()
  const AppLayout = isNoNavPage(router) ? PlaygroundLayout : DocsLayout

  return (
    <ThemeProvider theme={theme}>
      <EditorThemeProvider theme={importTheme(theme)}>
        <Head />
        <AppLayout>
          <Component {...pageProps} />
        </AppLayout>
      </EditorThemeProvider>
    </ThemeProvider>
  )
}

export default App