89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import {
|
|
ComponentProps,
|
|
DetailedHTMLProps,
|
|
HTMLAttributes,
|
|
PropsWithChildren,
|
|
} from "react";
|
|
import Stack from "../../layout/Stack";
|
|
import Container from "../../layout/Container";
|
|
import Row from "../../layout/Row";
|
|
import TWUIDocsAside from "./TWUIDocsAside";
|
|
import { twMerge } from "tailwind-merge";
|
|
import Paper from "../../elements/Paper";
|
|
import TWUIDocsRightAside from "./TWUIDocsRightAside";
|
|
|
|
export type DocsLinkType = {
|
|
title: string;
|
|
href: string;
|
|
strict?: boolean;
|
|
children?: DocsLinkType[];
|
|
editPage?: string;
|
|
};
|
|
|
|
type Props = PropsWithChildren & {
|
|
DocsLinks: DocsLinkType[];
|
|
docsAsideBefore?: React.ReactNode;
|
|
docsAsideAfter?: React.ReactNode;
|
|
wrapperProps?: ComponentProps<typeof Stack>;
|
|
docsContentProps?: ComponentProps<typeof Row>;
|
|
leftAsideProps?: DetailedHTMLProps<
|
|
HTMLAttributes<HTMLElement>,
|
|
HTMLElement
|
|
>;
|
|
autoExpandAll?: boolean;
|
|
editPageURL?: string;
|
|
};
|
|
|
|
/**
|
|
* # TWUI Docs
|
|
* @className `twui-docs-content`
|
|
*/
|
|
export default function TWUIDocs({
|
|
children,
|
|
DocsLinks,
|
|
docsAsideAfter,
|
|
docsAsideBefore,
|
|
wrapperProps,
|
|
docsContentProps,
|
|
leftAsideProps,
|
|
autoExpandAll,
|
|
editPageURL,
|
|
}: Props) {
|
|
return (
|
|
<Stack
|
|
center
|
|
{...wrapperProps}
|
|
className={twMerge("w-full px-4 sm:px-6", wrapperProps?.className)}
|
|
>
|
|
<Container>
|
|
<Paper className="xl:p-8 mobile-paper-hidden">
|
|
<Row
|
|
{...docsContentProps}
|
|
className={twMerge(
|
|
"items-start gap-8 w-full flex-nowrap",
|
|
docsContentProps?.className
|
|
)}
|
|
>
|
|
<TWUIDocsAside
|
|
DocsLinks={DocsLinks}
|
|
after={docsAsideAfter}
|
|
before={docsAsideBefore}
|
|
autoExpandAll={autoExpandAll}
|
|
{...leftAsideProps}
|
|
/>
|
|
<div
|
|
className={twMerge(
|
|
"block twui-docs-content pl-0 xl:pl-6 grow",
|
|
"overflow-hidden"
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
<TWUIDocsRightAside editPageURL={editPageURL} />
|
|
</Row>
|
|
</Paper>
|
|
</Container>
|
|
</Stack>
|
|
);
|
|
}
|