useScrollHighlight.tsx

'use client';
import React, { ReactNode } from 'react';
import { useEffect } from 'react';

function useScrollHighlight() {
  useEffect(() => {
    const runHighlight = () => {
      const params = new URLSearchParams(window.location.search);
      const section = params.get('highlight');
      if (!section) return;

      const el = document.getElementById(section);
      if (!el) return;

      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      el.classList.add('highlighted');
      setTimeout(() => el.classList.remove('highlighted'), 2000);
    };

    // on initial load
    runHighlight();

    // if user navigates via back/forward
    window.addEventListener('popstate', runHighlight);
    return () => window.removeEventListener('popstate', runHighlight);
  }, []);
}

export function ScrollClient({ children }: { children: ReactNode }) {
  useScrollHighlight();
  return <>{children}</>;
}

// how to use
// import { useScrollHighlight } from '@/hooks/useScrollHighlight";
// add 'useScrollHighlight();' to the layout or top level parent container to your main scrollable content