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>
				<div className="prose my-16">
					<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>
				</div>
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  )
}

export default Home