dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: docubook@latest template nextjs-docker

Browse Source
This commit is contained in:
gitfromwildan
2026-05-30 18:52:21 +07:00
parent bf2ef37f49
commit 80eb49d968
101 changed files with 1759 additions and 4165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/toc.tsx
View File

@@ -6,23 +6,45 @@ import { ListIcon } from "lucide-react"
import Sponsor from "./Sponsor"
import { useActiveSection } from "@/hooks"
import { TocItem } from "@/lib/toc"
import { cn } from "@/lib/utils"
export default function Toc({ tocs }: { tocs: TocItem[] }) {
const { activeId, setActiveId } = useActiveSection(tocs)
const hasTocs = Boolean(tocs?.length)
const wrapperClassName = cn(
hasTocs ? "toc" : "",
"flex-3 sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[240px] self-start lg:flex lg:p-8"
)
return (
<div className="toc flex-3 sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[238px] self-start lg:flex lg:p-8">
<div className="mb-auto flex h-full w-full flex-col gap-2 px-2">
<div className="flex items-center gap-2">
<ListIcon className="h-4 w-4" />
<h3 className="text-sm font-medium">On this page</h3>
</div>
<div className="max-h-[calc(70vh-2rem)] min-h-0 shrink-0">
<ScrollArea className="h-full">
<TocObserver data={tocs} activeId={activeId} onActiveIdChange={setActiveId} />
</ScrollArea>
</div>
<Sponsor />
<div className={wrapperClassName}>
<div className="flex h-full w-full flex-col gap-2 px-2">
{hasTocs && (
<>
<div className="flex items-center gap-2">
<ListIcon className="h-4 w-4" />
<h3 className="text-sm font-medium">On this page</h3>
</div>
<div className="flex-1 min-h-0">
<ScrollArea className="h-full">
<TocObserver data={tocs} activeId={activeId} onActiveIdChange={setActiveId} />
<div className="mt-4">
<Sponsor />
</div>
</ScrollArea>
</div>
</>
)}
{!hasTocs && (
<div className="flex-1 min-h-0">
<ScrollArea className="h-full">
<div className="mt-4">
<Sponsor />
</div>
</ScrollArea>
</div>
)}
</div>
</div>
)