dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

upgrade the project

Browse Source
This commit is contained in:
PrinOrange
2024-04-03 22:08:27 +08:00
parent a615511139
commit ea3597d62f
313 changed files with 10677 additions and 7069 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/readerpage/TOC.tsx
View File

@@ -1,34 +1,31 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useActiveHeading } from "@/hooks/useActiveHeading";
import { TTOCItem } from "@/types/toc.type";
import Link from "next/link";
import { twMerge } from "tailwind-merge";
import { Separator } from "../ui/separator";
export const TOC = (props: { data: TTOCItem[] }) => {
const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
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-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
<ul>
<div className="mx-5">
<div className="text-lg text-center p-2 font-bold border-t-2 border-b-2 border-gray-500">
{"TABLE OF CONTENTS"}
</div>
<div className="px-2 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
<div>
{props.data?.map((item) => (
<Link className={""} href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
<li
<Link href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
<div
className={twMerge(
`py-2 text-sm rounded-lg hover:bg-gray-100 hover:dark:bg-gray-900`,
activeId === `#${item.anchorId}` ? "bg-gray-100 dark:bg-gray-900 text-sky-700 dark:text-sky-500" : "",
`py-2 text-sm rounded-lg hover:text-sky-700 dark:hover:text-sky-400`,
activeId === `#${item.anchorId}` ? "text-sky-700 dark:text-sky-400" : "",
)}
style={{ paddingLeft: `${item.level - 1}em` }}
>{`${item.title}`}</li>
>{`${item.title}`}</div>
</Link>
))}
</ul>
</CardContent>
</Card>
</div>
</div>
</div>
);
};