safety.tsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../components/Buttons";
import { H2 } from "../components/headings";
export function Safety() {
  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="col">
            <section className="section">
                <div id="Role"><H2 text="Role in iGem"/></div>
            </section>
        </div>
        <div className="col">
            <section className="section">
                <div id="Checks"><H2 text="Check-Ins"/></div>
            </section>
        </div>
        <div className="col">
            <section className="section">
                <div id="Lab"><H2 text="Our Lab"/></div>
            </section>
        </div>
        <div className="col">
            <section id="BiosafetyH" className="section">
                <div id="Biosafety"><H2 text="Biosafety"/></div>
                <div id="BS1"><h3>Mechanism</h3> </div>
                <div id="BS2"><h3>Delivery</h3> </div>
            </section>
        </div>
        <div className="col">
            <section id="BiosecurityH" className="section">
                <div id="Biosecurity"><H2 text="Biosecurity"/></div>
                <div id="BSec1"><h3>Our Project</h3> </div>
                <div id="BSec2"><h3>Risk Assesment</h3> </div>
                <div id="BSec3"><h3>Managing Risks</h3> </div>
            </section>
        </div>
        <div className="col">
            <section id="BioethicsH" className="section">
                <div id="Bioethics"><H2 text="Bioethics"/></div>
                <div id="BE1"><h3>Gene Therapy</h3> </div>
                <div id="BE2"><h3>Primary cells</h3> </div>
                <div id="BE3"><h3>Consent and Guidelines</h3> </div>
            </section>
        </div>
    </>
  );
}