kitchen-sink-server/src/pages/index.tsx

import type { NextPage } from 'next'
import Link from 'next/link';
import * as Navigation from '@tesseract-design/web-navigation-react';
import { DefaultLayout } from 'src/components/DefaultLayout';

type Page = {
  id: string,
  href: string,
  label: string,
}

type Props = {
  componentPages?: Page[],
  examplePages?: Page[],
}

const createPageLink = (p: Page) => (
  <div
    key={p.id}
  >
    <Link
      href={p.href}
      passHref
    >
      <Navigation.LinkButton
        block
        border
        menuItem
      >
        {p.label}
      </Navigation.LinkButton>
    </Link>
  </div>
)

const IndexPage: NextPage<Props> = ({
  componentPages = [
    {
      id: 'action',
      href: '/categories/action',
      label: 'Action',
    },
    {
      id: 'code',
      href: '/categories/code',
      label: 'Code',
    },
    {
      id: 'freeform',
      href: '/categories/freeform',
      label: 'Freeform',
    },
    {
      id: 'navigation',
      href: '/categories/navigation',
      label: 'Navigation',
    },
    {
      id: 'number',
      href: '/categories/number',
      label: 'Number',
    },
    {
      id: 'option',
      href: '/categories/option',
      label: 'Option',
    },
  ],
  examplePages = [
    {
      id: 'registration-form',
      href: '/examples/registration-form',
      label: 'Registration Form',
    }
  ],
}) => {
  return (
    <DefaultLayout
      title="Kitchen Sink"
    >
      <main className="mt-8 mb-16 md:mt-16 md:mb-32">
        <section>
          <div className="container mx-auto px-4">
            <h1>
              Components
            </h1>
            <div>
              <div className="grid md:grid-cols-2 gap-4 my-4">
                {componentPages.map(createPageLink)}
              </div>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              Examples
            </h1>
            <div>
              <div className="grid md:grid-cols-2 gap-4 my-4">
                {examplePages.map(createPageLink)}
              </div>
            </div>
          </div>
        </section>
      </main>
    </DefaultLayout>
  )
}

export default IndexPage