[fix] reorganize some modules

components/reader-page/TOC.tsx

@@ -0,0 +1,31 @@
+import { useActiveHeading } from "@/hooks/useActiveHeading";
+import type { TTOCItem } from "@/types/toc.type";
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
+
+export const TOC = (props: { data: TTOCItem[] }) => {
+  const activeId = useActiveHeading(props.data.map((item) => `#${item.anchorId}`));
+
+  return (
+    <div className="mx-5">
+      <div className="border-gray-500 border-t-2 border-b-2 p-2 text-center font-bold text-lg">
+        {"TABLE OF CONTENTS"}
+      </div>
+      <div className="flat-scrollbar-normal h-[60vh] overflow-y-auto px-2 py-2">
+        <div>
+          {props.data?.map((item) => (
+            <Link href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
+              <div
+                className={twMerge(
+                  "rounded-lg py-2 text-sm 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}`}</div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};