tesseract/showcases/web-kitchensink-reactnext/src/pages/index.tsx

import type {GetStaticProps, NextPage} from 'next';
import Link from 'next/link';
import * as fs from 'fs/promises';
import * as path from 'path';
import * as Navigation from '@tesseract-design/web-navigation-react';
import { DefaultLayout } from '@/components/DefaultLayout';
import * as React from 'react'
import {Section} from '@/components/Section';

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

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

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

const IndexPage: NextPage<Props> = ({
  componentPages,
  examplePages,
}) => {
  return (
    <DefaultLayout
      title="Kitchen Sink"
    >
      <Section title="Components">
        <div className="grid md:grid-cols-2 gap-4 my-4">
          {componentPages.map(createPageLink)}
        </div>
      </Section>
      <Section title="Examples">
        <div className="grid md:grid-cols-2 gap-4 my-4">
          {examplePages.map(createPageLink)}
        </div>
      </Section>
    </DefaultLayout>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const pagesPath = path.resolve('src/pages');
  const categoriesPath = path.resolve(pagesPath, 'categories');
  const categoriesRaw = await fs.readdir(categoriesPath);
  const categoriesIndexPage = await Promise.all(
    categoriesRaw.map(async (c) => {
      const indexPath = await path.resolve(categoriesPath, c, 'index.tsx');
      try {
        const statResult = await fs.stat(indexPath);
        return [c, statResult.isFile()];
      } catch {
        // noop
      }

      return [c, false];
    })
  ) as [string, boolean][];
  const categories = categoriesIndexPage
    .filter(([, hasIndexPage]) => hasIndexPage)
    .map(([key]) => key);

  const examplesPath = path.resolve(pagesPath, 'examples');
  const examplesRaw = await fs.readdir(examplesPath);
  const examplesIndexPage = await Promise.all(
    examplesRaw.map(async (c) => {
      const indexPath = await path.resolve(examplesPath, c, 'index.tsx');
      try {
        const statResult = await fs.stat(indexPath);
        return [c, statResult.isFile()];
      } catch {
        // noop
      }

      return [c, false];
    })
  ) as [string, boolean][];
  const examples = examplesIndexPage
    .filter(([, hasIndexPage]) => hasIndexPage)
    .map(([key]) => key);

  return {
    props: {
      componentPages: categories.map((c) => ({
        id: c,
        href: `/categories/${c}`,
        label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '),
      })),
      examplePages: examples.map((e) => ({
        id: e,
        href: `/examples/${e}`,
        label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '),
      })),
    },
  };
};

export default IndexPage