klz-cables.com/components/blog/TableOfContents.tsx

'use client';

import React, { useEffect, useState } from 'react';
import { cn } from '@/components/ui/utils';
import { useAnalytics } from '../analytics/useAnalytics';
import { AnalyticsEvents } from '../analytics/analytics-events';

interface TocItem {
  id: string;
  text: string;
  level: number;
}

interface TableOfContentsProps {
  headings: TocItem[];
  locale: string;
}

export default function TableOfContents({ headings, locale }: TableOfContentsProps) {
  const [activeId, setActiveId] = useState<string>('');
  const { trackEvent } = useAnalytics();

  useEffect(() => {
    const observerOptions = {
      rootMargin: '-10% 0% -70% 0%',
      threshold: 0,
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveId(entry.target.id);
        }
      });
    }, observerOptions);

    // Use a small delay to ensure MDX content is rendered and IDs are present
    const timer = setTimeout(() => {
      const elements = headings.map((h) => document.getElementById(h.id));
      elements.forEach((el) => {
        if (el) observer.observe(el);
      });
    }, 500);

    return () => {
      clearTimeout(timer);
      observer.disconnect();
    };
  }, [headings]);

  if (headings.length === 0) return null;

  return (
    <nav className="hidden lg:block w-full ml-12">
      <div className="relative pl-6 border-l border-neutral-200">
        <h4 className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-text-primary/50 mb-6">
          {locale === 'de' ? 'Inhalt' : 'Table of Contents'}
        </h4>
        <ul className="space-y-4">
          {headings.map((heading) => (
            <li
              key={heading.id}
              style={{ paddingLeft: `${(heading.level - 2) * 1}rem` }}
              className="relative"
            >
              {activeId === heading.id && (
                <div className="absolute -left-[25px] top-0 w-[2px] h-full bg-primary transition-all duration-300" />
              )}
              <a
                href={`#${heading.id}`}
                className={cn(
                  'text-sm md:text-base transition-all duration-300 hover:text-primary block leading-snug',
                  activeId === heading.id
                    ? 'text-primary font-bold translate-x-1'
                    : 'text-text-secondary font-medium hover:translate-x-1',
                )}
                onClick={(e) => {
                  e.preventDefault();
                  const element = document.getElementById(heading.id);
                  if (element) {
                    trackEvent(AnalyticsEvents.TOC_CLICK, {
                      heading_id: heading.id,
                      heading_text: heading.text,
                      location: 'blog_sidebar',
                    });
                    const yOffset = -100;
                    const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
                    window.scrollTo({ top: y, behavior: 'smooth' });
                  }
                }}
              >
                {heading.text.replace(/\*\*(.*?)\*\*/g, '$1')}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
}