45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import clsx from "clsx"
|
|
import type { LoaderFunction } from "remix"
|
|
import { Link, Outlet, useLoaderData } from "remix"
|
|
import { HeaderLayout } from "~/components/header-layout"
|
|
import { HeaderNav } from "~/components/header-nav"
|
|
import { SideNav } from "~/components/side-nav"
|
|
import { SidebarLayout } from "~/components/sidebar-layout"
|
|
import type { ContentIndexEntry } from "~/helpers/create-index.server"
|
|
import { createContentIndex } from "~/helpers/create-index.server"
|
|
import { docsProseClass, linkClass } from "~/styles"
|
|
|
|
type LoaderData = ContentIndexEntry[]
|
|
|
|
export const loader: LoaderFunction = async () => {
|
|
const data: LoaderData = await createContentIndex("app/routes/docs/guides")
|
|
return data
|
|
}
|
|
|
|
export default function Docs() {
|
|
const data: LoaderData = useLoaderData()
|
|
return (
|
|
<HeaderLayout
|
|
header={<HeaderNav />}
|
|
body={
|
|
<SidebarLayout
|
|
sidebar={
|
|
<SideNav heading="Guides">
|
|
{data.map(({ title, route }) => (
|
|
<Link className={linkClass} key={route} to={route}>
|
|
{title}
|
|
</Link>
|
|
))}
|
|
</SideNav>
|
|
}
|
|
body={
|
|
<section className={clsx(docsProseClass, "pb-8")}>
|
|
<Outlet />
|
|
</section>
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
}
|