tesseract/showcases/web-kitchensink-reactnext/src/components/DocsLayout.tsx

import * as React from 'react';
import {Layouts, Widgets} from '@tesseract-design/viewfinder-react';
import Link from 'next/link';
import {Brand} from '@/components/Brand';
import {PLATFORMS} from '@/utils/data';

export interface Page {
  id: string;
  href: string;
  label: string;
}

export interface DocsLayoutProps {
  componentPages?: { name: string; components: Page[] }[];
  docsPages?: Page[];
  examplePages?: Page[];
  sidebarOpen?: boolean;
  platforms?: any;
  children?: React.ReactNode;
  currentPlatform?: string;
  currentVersion?: string;
}

const createSidebarPageLink = (p: Page) => (
  <div
    key={p.id}
  >
    <Link
      href={p.href}
      className="no-underline font-semibold m-0 p-0 leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
    >
      <Layouts.LeftSidebar.SidebarContentContainer>
        {p.label}
      </Layouts.LeftSidebar.SidebarContentContainer>
    </Link>
  </div>
);

export const DocsLayout: React.FC<DocsLayoutProps> = ({
  sidebarOpen = false,
  componentPages = [],
  docsPages = [],
  examplePages = [],
  platforms = [],
  currentPlatform,
  currentVersion,
  children,
}) => {
  return (
    <Layouts.LeftSidebar.Root
      topBarWidget={
        <Widgets.TopBar
          span="wide"
          brand={
            <Link
              href="/"
              className="no-underline block"
            >
              <Brand
                platform={currentPlatform}
                version={currentVersion}
              />
            </Link>
          }
          menuLink={
            <Link
              href={{
                query: {
                  open: 'sidebar',
                },
              }}
              className="no-underline p-0 m-0"
            >
              <svg
                className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
                viewBox="0 0 24 24"
                role="presentation"
              >
                <line x1="3" y1="12" x2="21" y2="12"/>
                <line x1="3" y1="6" x2="21" y2="6"/>
                <line x1="3" y1="18" x2="21" y2="18"/>
              </svg>
            </Link>
          }
        />
      }
      sidebarBaseWidget={
        <Widgets.LeftSidebarBase
          open={sidebarOpen}
        >
          <div className="min-h-full py-4 box-border flex flex-col gap-8">
            <div>
              <nav>
                <Layouts.LeftSidebar.SidebarContentContainer>
                  <h1>
                    Docs
                  </h1>
                </Layouts.LeftSidebar.SidebarContentContainer>
                <div className="flex flex-col gap-2 my-8">
                  {docsPages?.map(createSidebarPageLink)}
                </div>
              </nav>
              <nav>
                <Layouts.LeftSidebar.SidebarContentContainer>
                  <h1>
                    Platforms
                  </h1>
                </Layouts.LeftSidebar.SidebarContentContainer>
                <div className="flex flex-col gap-2 my-8">
                  <Layouts.LeftSidebar.SidebarContentContainer>
                    <div className="flex gap-8">
                      {platforms.map((platformName) => {
                        // TODO make platform selection a select with optgroup labels for platforms and versions
                        const platform = PLATFORMS[platformName as keyof typeof PLATFORMS];

                        return (
                          <Link
                            key={platformName}
                            href={platform.href}
                            className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
                          >
                            {platform.label}
                          </Link>
                        );
                      })}
                    </div>
                  </Layouts.LeftSidebar.SidebarContentContainer>
                </div>
              </nav>
              {/*<div>*/}
              {/*  <Layouts.LeftSidebar.SidebarContentContainer>*/}
              {/*    <h1>*/}
              {/*      Categories*/}
              {/*    </h1>*/}
              {/*  </Layouts.LeftSidebar.SidebarContentContainer>*/}
              {/*  {componentPages.map(({name, components}) => (*/}
              {/*    <nav key={name}>*/}
              {/*      <h2>*/}
              {/*        <Layouts.LeftSidebar.SidebarContentContainer>*/}
              {/*          {name}*/}
              {/*        </Layouts.LeftSidebar.SidebarContentContainer>*/}
              {/*      </h2>*/}
              {/*      <div className="flex flex-col gap-2 my-8">*/}
              {/*        {components?.map(createSidebarPageLink)}*/}
              {/*      </div>*/}
              {/*    </nav>*/}
              {/*  ))}*/}
              {/*</div>*/}
              {/*<nav>*/}
              {/*  <Layouts.LeftSidebar.SidebarContentContainer>*/}
              {/*    <h1>*/}
              {/*      Examples*/}
              {/*    </h1>*/}
              {/*  </Layouts.LeftSidebar.SidebarContentContainer>*/}
              {/*  <div className="flex flex-col gap-4 my-4">*/}
              {/*    {examplePages?.map(createSidebarPageLink)}*/}
              {/*  </div>*/}
              {/*</nav>*/}
            </div>
            <div className="mb-8">
              <Layouts.LeftSidebar.SidebarContentContainer>
                <div className="flex gap-8">
                  <Link
                    href="https://code.modal.sh/tesseract-design/tesseract"
                    className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
                  >
                    Repo
                  </Link>
                  <Link
                    href="https://code.modal.sh/tesseract-design/tesseract"
                    className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
                  >
                    Website
                  </Link>
                  <Link
                    href="https://code.modal.sh/tesseract-design/tesseract/issues"
                    className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
                  >
                    Issues
                  </Link>
                </div>
              </Layouts.LeftSidebar.SidebarContentContainer>
            </div>
          </div>
        </Widgets.LeftSidebarBase>
      }
    >
      <Layouts.LeftSidebar.MainContentContainer>
        {children}
      </Layouts.LeftSidebar.MainContentContainer>
    </Layouts.LeftSidebar.Root>
  )
};