viewfinder/packages/kitchen-sink/react/src/pages/layouts/basic.tsx

import type { NextPage } from 'next'
import { Layouts, Widgets } from '@tesseract-design/viewfinder-react';
import {Span} from '@tesseract-design/viewfinder-base';
import {Brand} from '../../components/Brand';
import {DummyLinks} from '../../components/DummyLinks';

const BasicLayoutPage: NextPage = () => {
  return (
    <Layouts.Basic.Root
      topBarWidget={
        <Widgets.TopBar
          brand={
            <Brand />
          }
          style={{
            backgroundColor: 'inherit',
          }}
          span={Span.NARROW}
        >
          <DummyLinks />
        </Widgets.TopBar>
      }
    >
      <Layouts.Basic.ContentContainer
        span={Span.NARROW}
      >
        Hello
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  )
}

export default BasicLayoutPage