viewfinder/packages/kitchen-sink/react-next/src/pages/index.tsx

import type { NextPage } from 'next'
import { Layouts } from '@tesseract-design/viewfinder-react'
import Link from 'next/link'

const Home: NextPage = () => {
  return (
    <Layouts.Basic.Root>
      <Layouts.Basic.ContentContainer>
        <h1>
          Viewfinder Examples
        </h1>
        <nav>
          <h2>
            Layouts
          </h2>
          <div>
            <Link href="layouts/basic">Basic</Link>
          </div>
          <div>
            <Link href="layouts/basic?span=narrow">Basic Narrow</Link>
          </div>
          <div>
            <Link href="layouts/left-sidebar">Left Sidebar</Link>
          </div>
          <div>
            <Link href="layouts/left-sidebar/alternate">Left Sidebar (alternate)</Link>
          </div>
          <div>
            <Link href="layouts/left-sidebar-with-menu">Left Sidebar With Menu</Link>
          </div>
          <div>
            <Link href="layouts/right-sidebar-static">Right Sidebar Static</Link>
          </div>
        </nav>
        <p>
          Look at how the layouts are coded in the <a href="https://code.modal.sh/TheoryOfNekomata/viewfinder" rel="noreferrer noopener" target="_blank">Git repository</a>.
        </p>
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  )
}

export default Home