TableOfContents

Interactive table of contents that highlights the current section based on scroll position.

Props

Heading Interface

interface Heading {
  id: string;
  text: string;
}

Usage

import TableOfContents from '@/components/molecules/TableOfContents';

<TableOfContents 
  headings={[
    { id: "introduction", text: "Introduction" },
    { id: "getting-started", text: "Getting Started" }
  ]}
/>

Features

• Active section highlighting: Highlights current section based on scroll
• Smooth scrolling: Smooth scroll to sections on click
• Intersection Observer: Uses Intersection Observer API to detect visible sections
• Visual indicator: Active item shows amethyst accent color and left border
• Auto-updates: Updates active state as user scrolls

Behavior

• Observes all heading elements in the document
• Updates active state when a heading enters the viewport
• Clicking a link smoothly scrolls to that section
• Active item is visually distinguished with accent color and border

Notes

• Client-side component (uses 'use client')
• Returns null if no headings provided
• Uses Intersection Observer with -100px root margin for better UX
• Scroll offset accounts for header height (100px)