longnguyendev

Here is the toc component

Let's break down the parts of the BlogTableOfContents component that are used to sync the scroll of the collapsed table of contents (TOC) with the scroll of the page, ensuring that the current element is always in view.

Scroll Sync Mechanism

State and References

State Variables:

headings: Stores an array of heading objects with their ids and indexes.
activeId: Keeps track of the currently active heading id.
tocCollapsed: Manages the collapsed state of the TOC.

	"use client";

	import clsx from "clsx";
	import { motion, useSpring, useTransform } from "framer-motion";
	import { usePathname } from "next/navigation";
	import { useEffect, useLayoutEffect, useRef, useState } from "react";
	import Confetti from "react-dom-confetti";

	import ArrowIcon from "@/assets/svg/arrow.svg";
	import { Heading } from "@/components/ui/Heading";