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

Optimize UI details and fix some defects

Browse Source
This commit is contained in:
PrinOrange
2024-01-09 16:48:48 +08:00
parent f91f643209
commit 97ca8404b5
16 changed files with 198 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/readerpage/TOC.tsx
View File

@@ -1,22 +1,27 @@
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 (
<div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400">
<div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100">
{"TABLE OF CONTENTS"}
</div>
<ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
{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>
</div>
<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>
);
};