reorganize the code
This commit is contained in:
@@ -4,7 +4,7 @@ import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { FaHeading } from "react-icons/fa";
|
||||
|
||||
export const SideTOC = (props: { data: TTOCItem[] }) => {
|
||||
export const DrawerTOC = (props: { data: TTOCItem[] }) => {
|
||||
const [isTOCOpen, setIsTOCOpen] = useState(false);
|
||||
return (
|
||||
<Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
|
||||
@@ -25,7 +25,7 @@ export const SideTOC = (props: { data: TTOCItem[] }) => {
|
||||
onClick={() => {
|
||||
setIsTOCOpen(false);
|
||||
}}
|
||||
key={`flat-toc-${item.anchorId}`}
|
||||
key={`drawer-toc-${item.anchorId}`}
|
||||
href={`#${item.anchorId}`}
|
||||
>
|
||||
<li
|
||||
@@ -3,8 +3,8 @@ import Link from "next/link";
|
||||
|
||||
export const TOC = (props: { data: TTOCItem[] }) => {
|
||||
return (
|
||||
<div className="sticky top-[5em] mx-5 p-2 border-l border-dashed border-gray-500">
|
||||
<div className="p-2 font-bold border-b border-gray-500">{"TABLE OF CONTENTS"}</div>
|
||||
<div className="sticky top-[5em] mx-5 p-2 border-gray-500">
|
||||
<div className="p-2 font-bold text-center border border-gray-500">{"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}`}>
|
||||
|
||||
Reference in New Issue
Block a user