iGEM 2023 — Team kyoto


import Container from "components/container";
import Hero from "components/hero";

import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { Tabs, Tab, Box } from "@mui/material";
import { TabContext, TabPanel } from "@mui/lab";
import EngineeringPart1 from "components/engineering/part1.mdx";
import EngineeringPart2 from "components/engineering/part2.mdx";
import EngineeringPart3 from "components/engineering/part3.mdx";
import EngineeringPart4 from "components/engineering/part4.mdx";
import { navHeight } from "constants/numbers";
import Meta from "components/meta";

export default function Engineering() {
  // to handle tab change.
  const [value, setValue] = React.useState("0");
  function handleChange(_event: React.SyntheticEvent, newValue: string) {
    setValue(newValue);
  }

  function getAsString(val: string | string[]) {
    // if array, get the last element.
    if (Array.isArray(val)) {
      return val[val.length - 1];
    }
    return val;
  }

  const router = useRouter();
  useEffect(() => {
    const getInitialTab = () => {
      // Get the tab query parameter from the URL
      const initialTab = getAsString(router.query.tab ?? "0") || "0";
      console.log("router", router.query.tab);
      // judge if initialTab is valid
      const res = ["0", "1", "2", "3"].includes(initialTab) ? initialTab : "0";
      console.log(`initialTab: ${initialTab}, res: ${res}`);
      return res;
    };
    const initialTab = getInitialTab();
    setValue(initialTab);
  }, [router]);

  const goToTop = () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth",
    });
  };

  return (
    <>
      <Meta pageTitle="Engineering" />
      <Hero imageSource="https://static.igem.wiki/teams/4655/wiki/engineering-1.jpg" />
      <h2 style={{ textAlign: "center", marginTop: "10px" }}>
        -The Engineering page has 4 sections-
      </h2>
      <TabContext value={value}>
        <div
          style={{
            position: "sticky",
            top: `${navHeight}px`,
            width: "100%",
            zIndex: 100,
          }}
        >
          <Box
            display="flex"
            justifyContent="center"
            width="100%"
            sx={{ backgroundColor: "#FDEFEC" /* var(--rose) */ }}
          >
            <Tabs
              value={value}
              onChange={handleChange}
              textColor="inherit"
              TabIndicatorProps={{
                style: {
                  backgroundColor: "#c4545d" /* var(--brownleaf) */,
                },
              }}
              variant="scrollable"
            >
              {/* Tab には icon をつけられるよ */}
              <Tab
                label="1. Quorum Sensing & Lysis"
                value="0"
                disableRipple
                onClick={goToTop}
              />
              <Tab
                label="2. Protein Degradation"
                value="1"
                disableRipple
                onClick={goToTop}
              />
              <Tab
                label="3. DNA Degradation"
                value="2"
                disableRipple
                onClick={goToTop}
              />
              <Tab
                label="4. Evolutionary Stability"
                value="3"
                disableRipple
                onClick={goToTop}
              />
            </Tabs>
          </Box>
        </div>
        <Container>
          <TabPanel value={"0"}>
            <EngineeringPart1 />
          </TabPanel>
          <TabPanel value={"1"}>
            <EngineeringPart2 />
          </TabPanel>
          <TabPanel value={"2"}>
            <EngineeringPart3 />
          </TabPanel>
          <TabPanel value={"3"}>
            <EngineeringPart4 />
          </TabPanel>
        </Container>
      </TabContext>
    </>
  );
}