|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- 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>
- )
- };
|