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

reorganize the code

Browse Source
This commit is contained in:
PrinOrange
2024-01-04 11:34:27 +08:00
parent 02121a4daa
commit fac2bb9b3a
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/readerpage/SideTOC.tsx → components/readerpage/DrawerTOC.tsx
View File

@@ -4,7 +4,7 @@ import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { FaHeading } from "react-icons/fa"; import { FaHeading } from "react-icons/fa";
export const SideTOC = (props: { data: TTOCItem[] }) => { export const DrawerTOC = (props: { data: TTOCItem[] }) => {
const [isTOCOpen, setIsTOCOpen] = useState(false); const [isTOCOpen, setIsTOCOpen] = useState(false);
return ( return (
<Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}> <Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
@@ -25,7 +25,7 @@ export const SideTOC = (props: { data: TTOCItem[] }) => {
onClick={() => { onClick={() => {
setIsTOCOpen(false); setIsTOCOpen(false);
}} }}
key={`flat-toc-${item.anchorId}`} key={`drawer-toc-${item.anchorId}`}
href={`#${item.anchorId}`} href={`#${item.anchorId}`}
> >
<li <li

4
components/readerpage/TOC.tsx
View File

@@ -3,8 +3,8 @@ import Link from "next/link";
export const TOC = (props: { data: TTOCItem[] }) => { export const TOC = (props: { data: TTOCItem[] }) => {
return ( return (
<div className="sticky top-[5em] mx-5 p-2 border-l border-dashed border-gray-500"> <div className="sticky top-[5em] mx-5 p-2 border-gray-500">
<div className="p-2 font-bold border-b border-gray-500">{"TABLE OF CONTENTS"}</div> <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"> <ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
{props.data?.map((item) => ( {props.data?.map((item) => (
<Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}> <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>

4
pages/blog/[id].tsx
View File

@@ -1,9 +1,9 @@
import { ContentContainer, Page } from "@/components/layouts/layouts"; import { ContentContainer, Page } from "@/components/layouts/layouts";
import { MDXComponentsSet } from "@/components/mdx"; import { MDXComponentsSet } from "@/components/mdx";
import { DrawerTOC } from "@/components/readerpage/DrawerTOC";
import { PostComments } from "@/components/readerpage/PostComments"; import { PostComments } from "@/components/readerpage/PostComments";
import { PostCover } from "@/components/readerpage/PostCover"; import { PostCover } from "@/components/readerpage/PostCover";
import { ShareButtons } from "@/components/readerpage/ShareButtons"; import { ShareButtons } from "@/components/readerpage/ShareButtons";
import { SideTOC } from "@/components/readerpage/SideTOC";
import { TOC } from "@/components/readerpage/TOC"; import { TOC } from "@/components/readerpage/TOC";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import { Footer } from "@/components/utils/Footer"; import { Footer } from "@/components/utils/Footer";
@@ -143,7 +143,7 @@ const ReaderPage = (props: ReaderPageProps) => {
</div> </div>
{props.tocList.length > 2 && ( {props.tocList.length > 2 && (
<div className="md:hidden"> <div className="md:hidden">
<SideTOC data={props.tocList} /> <DrawerTOC data={props.tocList} />
</div> </div>
)} )}
</ContentContainer> </ContentContainer>