112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import {
|
|
Route,
|
|
createBrowserRouter,
|
|
createRoutesFromElements,
|
|
RouterProvider,
|
|
redirect,
|
|
} from "react-router-dom";
|
|
import MainLayout from "./MainLayout";
|
|
import Home from "./Home";
|
|
import DocsLayout from "./DocsLayout";
|
|
import ErrorBoundary from "./ErrorHandler";
|
|
import DynamicLayout from "./DynamicLayout";
|
|
|
|
import DocsIntroduction, {
|
|
tableOfContents as docsIntroductionToc,
|
|
} from "./docs/docs/introduction.mdx";
|
|
import DocsInstallation, {
|
|
tableOfContents as docsInstallationToc,
|
|
} from "./docs/docs/installation.mdx";
|
|
|
|
import ComponentsButton, {
|
|
tableOfContents as componentsButtonToc,
|
|
} from "./docs/components/Button.mdx";
|
|
import ComponentsCheckbox, {
|
|
tableOfContents as componentsCheckboxToc,
|
|
} from "./docs/components/Checkbox.mdx";
|
|
import ComponentsDialog, {
|
|
tableOfContents as componentsDialogToc,
|
|
} from "./docs/components/Dialog.mdx";
|
|
import { forwardRef } from "react";
|
|
|
|
const overrideComponents = {
|
|
pre: forwardRef<HTMLPreElement, any>((props: any, ref) => (
|
|
<pre ref={ref} {...props} className={`${props.className} hljs`} />
|
|
)),
|
|
code: forwardRef<HTMLElement, any>((props: any, ref) => (
|
|
<code
|
|
ref={ref}
|
|
{...props}
|
|
className={`${props.className} rounded-md bg-neutral-800 text-orange-500 font-light p-1 before:content-none after:content-none`}
|
|
/>
|
|
)),
|
|
table: forwardRef<HTMLTableElement, any>((props: any, ref) => (
|
|
<div className="overflow-auto">
|
|
<table ref={ref} {...props} className={`${props.className}`} />
|
|
</div>
|
|
)),
|
|
};
|
|
|
|
const router = createBrowserRouter(
|
|
createRoutesFromElements(
|
|
<Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
|
|
<Route index element={<Home />} />
|
|
<Route path="docs" element={<DocsLayout />}>
|
|
<Route
|
|
index
|
|
element={
|
|
<DynamicLayout toc={docsIntroductionToc}>
|
|
<DocsIntroduction />
|
|
</DynamicLayout>
|
|
}
|
|
/>
|
|
<Route
|
|
path="installation"
|
|
element={
|
|
<DynamicLayout toc={docsInstallationToc}>
|
|
<DocsInstallation />
|
|
</DynamicLayout>
|
|
}
|
|
/>
|
|
<Route path="components">
|
|
<Route index loader={() => redirect("/docs/components/button")} />
|
|
<Route
|
|
path="button"
|
|
element={
|
|
<DynamicLayout toc={componentsButtonToc}>
|
|
<ComponentsButton components={overrideComponents} />
|
|
</DynamicLayout>
|
|
}
|
|
/>
|
|
<Route
|
|
path="checkbox"
|
|
element={
|
|
<DynamicLayout toc={componentsCheckboxToc}>
|
|
<ComponentsCheckbox components={overrideComponents} />
|
|
</DynamicLayout>
|
|
}
|
|
/>
|
|
<Route
|
|
path="dialog"
|
|
element={
|
|
<DynamicLayout toc={componentsDialogToc}>
|
|
<ComponentsDialog components={overrideComponents} />
|
|
</DynamicLayout>
|
|
}
|
|
/>
|
|
</Route>
|
|
</Route>
|
|
</Route>
|
|
)
|
|
);
|
|
|
|
function App() {
|
|
return (
|
|
<>
|
|
<RouterProvider router={router} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|