28 lines
989 B
TypeScript
28 lines
989 B
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { TTOCItem } from "@/types/toc.type";
|
|
import Link from "next/link";
|
|
import { Separator } from "../ui/separator";
|
|
|
|
export const TOC = (props: { data: TTOCItem[] }) => {
|
|
return (
|
|
<Card className="sticky top-[5em] mx-5">
|
|
<CardHeader className="p-3">
|
|
<CardTitle className="text-lg text-center">{"TABLE OF CONTENTS"}</CardTitle>
|
|
</CardHeader>
|
|
<Separator />
|
|
<CardContent className="px-1 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
|
|
<ul>
|
|
{props.data?.map((item) => (
|
|
<Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
|
|
<li
|
|
className="my-2 text-sm target:text-blue-500"
|
|
style={{ paddingLeft: `${item.level - 1}em` }}
|
|
>{`${item.title}`}</li>
|
|
</Link>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|