notebook.tsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../components/Buttons";
import H1 from "../components/headings";
export function Notebook() {
  const location = useLocation();

    useEffect(() => {
        const params = new URLSearchParams(location.search);
        const collapseId = params.get('collapseId');
        const tabId = params.get('tab');

        // Scroll to the section specified by collapseId
        if (collapseId) {
            const collapseElement = document.getElementById(collapseId);
            if (collapseElement) {
                const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
                const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
                const scrollPosition = elementTop - offset;

                window.scrollTo({
                    top: scrollPosition,
                    behavior: 'smooth',
                });
            }
        }

        // Open the tab specified by tabId
        if (tabId) {
            openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
        }
    }, [location.search]);

  return (
    <>
      <div className="row mt-4">
        <div className="col-lg-8">
        <strong>
            <h1> Ich bin ein Header! </h1>
          </strong>
          <i>
            <p> Ich bin ein Paragraph. </p>
          </i> 
        </div>
        
      </div>
    </>
  );
}