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

import type {GetStaticProps, NextPage} from 'next';
import * as React from 'react'
import {useRouter} from 'next/router';
import ReactMarkdown from 'react-markdown';
import {Layouts} from '@tesseract-design/viewfinder-react';
import {LinkButton} from '@tesseract-design/web-navigation-react';
import Link from 'next/link';
import {getDocs, getMainReadmeFileContents, getPlatforms, PLATFORMS} from '@/utils/data';

export interface Props {
  markdown: string;
  docsPages: any;
  platforms: string[];
}

const IndexPage: NextPage<Props> = ({
  markdown,
  docsPages,
  platforms,
}) => {
  const router = useRouter();

  return (
    <Layouts.Basic.Root>
      <Layouts.Basic.ContentContainer>
        <ReactMarkdown
          className="my-12 leading-loose"
          components={{
            ul: ({node, ordered: _ordered, ...props}) => (
              <ul
                {...props}
                className="list-disc pl-4"
              />
            ),
            li: ({node, ...props}) => (
              <li
                {...props}
                className="list-item pl-4"
              />
            ),
          }}
        >
          {markdown}
        </ReactMarkdown>
        <nav>
          <h1>Platforms</h1>
          <div className="grid xs:grid-cols-2 gap-4">
            {platforms.map((platformName) => {
              const platform = PLATFORMS[platformName as keyof typeof PLATFORMS];

              return (
                <div
                  key={platformName}
                >
                  <Link href={platform.href} passHref legacyBehavior>
                    <LinkButton
                      href={platform.href}
                      menuItem
                      block
                      variant="outline"
                    >
                      {platform.label}
                    </LinkButton>
                  </Link>
                </div>
              )
            })}
          </div>
        </nav>
        <nav>
          <h1>Docs</h1>
          <div className="grid xs:grid-cols-2 gap-4">
            {docsPages.map((page) => (
              <div
                key={page.id}
              >
                <Link href={page.href} passHref legacyBehavior>
                  <LinkButton
                    href={page.href}
                    menuItem
                    block
                    variant="outline"
                  >
                    {page.label}
                  </LinkButton>
                </Link>
              </div>
            ))}
          </div>
        </nav>
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const props = {} as Record<string, unknown>;

  props.markdown = await getMainReadmeFileContents('README.md') ?? null;
  props.docsPages = await getDocs({
    deriveHrefFromFilename: d => `/docs/${
      d
        .replace(/\.md/i, '')
        .split('-')
        .slice(1)
        .join('-')
    }`,
    deriveLabelFromFilename: d => (
      d
        .split('-')
        .slice(1)
        .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
        .join(' ')
        .replace(/\.md/i, '')
    ),
  });
  props.platforms = await getPlatforms();

  return {
    props,
  };
};

export default IndexPage