proof.tsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../components/Buttons";
export function Proof() {
  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 (
      <>
        <section id="prelim-2000">
          <h2>Preliminary test with lipofectamine 2000</h2>
          <h3>Seeding</h3>
          <h3>Transfection</h3>
          <h3>Microscopy</h3>
          <table>
            <tr>
              <th>Plasmid</th>
              <th>Expected results</th>
              <th>Results</th>
            </tr>
            <tr>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </table>
        </section>
        <section id="pos-control-2000">
          <h2>Positiv control and optimization</h2>
          <h3>Seeding</h3>
          <h3>Transfection</h3>
          <h3>Microscopy</h3>
          <table>
            <tr>
              <th>Plasmid</th>
              <th>Expected results</th>
              <th>Results</th>
            </tr>
            <tr>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </table>
        </section>
        <section id="pos-control-3000">
          <h2>Positiv control and optimization</h2>
          <h3>Seeding</h3>
          <h3>Transfection</h3>
          <h3>Microscopy</h3>
          <table>
            <tr>
              <th>Plasmid</th>
              <th>Expected results</th>
              <th>Results</th>
            </tr>
            <tr>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </table>
        </section>
        <section id="poc-3000">
          <h2>Preliminary test with lipofectamine 2000</h2>
          <h3>Seeding</h3>
          <h3>Transfection</h3>
          <h3>Microscopy</h3>
          <table>
            <tr>
              <th>Plasmid</th>
              <th>Expected results</th>
              <th>Results</th>
            </tr>
            <tr>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </table>
        </section>
      </>
    );
  }