33 HoverCardTrigger ,
44 HoverCardContent ,
55} from "@/pages/_components/ui/hover-card" ;
6- import { Card } from "@/pages/_components/ui/card" ;
76import { Button } from "@/pages/_components/ui/button" ;
87import { LucideTableOfContents } from "lucide-react" ;
98import { cn } from "@/pages/_lib/utils" ;
@@ -24,14 +23,7 @@ export const TableOfContents: React.FC<TocProps> = ({ toc, className }) => {
2423 < div className = { cn ( "toc text-sm w-full hidden lg:block" , className ) } >
2524 < div className = "grid gird-cols-1 gap-2.5 w-full" >
2625 { toc . map ( ( entry ) => (
27- < a className = "x-underline" href = { `#${ entry . id } ` } >
28- < div
29- key = { entry . id }
30- className = "text-zinc-400 hover:text-zinc-900 cursor-pointer font-normal decoration-zinc-400 decoration-0 line-clamp-2"
31- >
32- < span className = "" > { entry . value } </ span >
33- </ div >
34- </ a >
26+ < Heading key = { entry . id } entry = { entry } />
3527 ) ) }
3628 </ div >
3729 </ div >
@@ -43,23 +35,30 @@ export const TableOfContents: React.FC<TocProps> = ({ toc, className }) => {
4335 </ Button >
4436 </ HoverCardTrigger >
4537 < HoverCardContent className = "w-[16rem]" >
46- < Card >
47- < div className = "grid gird-cols-1 gap-2.5 w-full" >
48- { toc . map ( ( entry ) => (
49- < a className = "x-underline" href = { `#${ entry . id } ` } >
50- < div
51- key = { entry . id }
52- className = "text-zinc-400 hover:text-zinc-900 cursor-pointer font-normal decoration-zinc-400 decoration-0 line-clamp-2"
53- >
54- { entry . value }
55- </ div >
56- </ a >
57- ) ) }
58- </ div >
59- </ Card >
38+ < div className = "grid gird-cols-1 gap-2.5 w-full" >
39+ { toc . map ( ( entry ) => (
40+ < Heading key = { entry . id } entry = { entry } />
41+ ) ) }
42+ </ div >
6043 </ HoverCardContent >
6144 </ HoverCard >
6245 </ div >
6346 </ >
6447 ) ;
6548} ;
49+
50+ const Heading = ( { entry } : { entry : Toc [ number ] } ) => {
51+ return (
52+ < >
53+ < a
54+ href = { `#${ entry . id } ` }
55+ className = "inline-block x-underline text-zinc-400 hover:text-zinc-900 font-normal line-clamp-2"
56+ >
57+ { entry . value }
58+ </ a >
59+ { entry . children ?. map ( ( child ) => (
60+ < Heading entry = { child } />
61+ ) ) }
62+ </ >
63+ ) ;
64+ } ;
0 commit comments