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

'use client';

import React, { useEffect, useState } from 'react';
import { cn } from '@/components/ui/utils';

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>('');

  useEffect(() => {
    const observerOptions = {
      rootMargin: '-100px 0% -80% 0%',
      threshold: 0
    };

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

    const elements = headings.map((h) => document.getElementById(h.id));
    elements.forEach((el) => {
      if (el) observer.observe(el);
    });

    return () => 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) {
                    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>
  );
}