Upgrade UI design and improve some functions

components/readerpage/TOC.tsx

@@ -1,21 +1,28 @@
 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-1 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
+      <CardContent className="px-2 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}`}>
+            <Link className={""} href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
               <li
-                className="my-2 text-sm target:text-blue-500"
+                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" : "",
+                )}
                 style={{ paddingLeft: `${item.level - 1}em` }}
               >{`${item.title}`}</li>
             </Link>