react-common/packages/react-common-docs/src/pages/_app.tsx

import * as React from 'react'
import styled from 'styled-components'
import sidebar from '../sidebar.json'
import brand from '../../brand'
import Sidebar from '../components/Sidebar/Sidebar'
import '../../public/global.css'
import '../../public/theme/dark.css'

const Container = styled('div')({
  maxWidth: 720,
  margin: '0 auto',
  padding: '0 1rem',
  boxSizing: 'border-box',
})

type AppProps = {
  Component: React.ElementType,
  pageProps: Record<string, unknown>,
}

const App: React.FC<AppProps> = ({
  Component,
  pageProps,
}) => (
  <React.Fragment>
    <Sidebar
      brand={brand}
      data={sidebar}
    />
    <main>
      <Container>
        <Component
          {...pageProps}
        />
      </Container>
    </main>
  </React.Fragment>
)

export default App