www-new/pages/resources/internships/index.tsx

import React from "react";

import { ConnectWithUs } from "@/components/ConnectWithUs";
import { DefaultLayout } from "@/components/DefaultLayout";
import { EmailSignup } from "@/components/EmailSignup";
import { Image } from "@/components/Image";
import {
  GetShapesConfig,
  mobileShapesConfig,
} from "@/components/ShapesBackground";
import { Title } from "@/components/Title";

import Header from "../../../content/resources/internships/index.mdx";
import ResumePreface from "../../../content/resources/internships/resume/preface.mdx";
import ResumeGeneral from "../../../content/resources/internships/resume/general.mdx";
import ResumeAppearance from "../../../content/resources/internships/resume/appearance.mdx";
import ResumeContent from "../../../content/resources/internships/resume/content.mdx";
import InterviewPreface from "../../../content/resources/internships/interview/preface.mdx";
import InterviewGeneral from "../../../content/resources/internships/interview/general.mdx";
import InterviewBehavioural from "../../../content/resources/internships/interview/behavioural.mdx";
import InterviewTechnical from "../../../content/resources/internships/interview/technical.mdx";
import Resources from "../../../content/resources/internships/resources/index.mdx";


import styles from "./index.module.css";

export default function Internships() {
  const [currentSubpage, setCurrentSubpage] = React.useState(1);
  const [currentResumePage, setCurrentResumePage] = React.useState(0);
  const [currentInterviewPage, setCurrentInterviewPage] = React.useState(0);
  return (
    <>
      <Title>Internships</Title>
      <div className={styles.titleContainer}>
        <h1 className={styles.title}>Internship Guide and Resources</h1>
        <Image src="/images/about-us.svg" className={styles.codey} />
      </div>
      <div className={styles.content}>
        <Header />
      </div>
      <div className={styles.selectorContainer}>
        {["Resume", "Interview", "Resources"].map((name, i) => (
          <button
            className={
              styles.selector +
              " " +
              (currentSubpage === i ? styles.selected : "")
            }
            key={name}
            onClick={() => {
              setCurrentSubpage(i);
            }}
          >
            {name}
          </button>
        ))}
      </div>
      <div className={styles.subpagesWrapper}>
        <div
          className={
            styles.subpagesContainer +
            " " +
            (currentSubpage === 0
              ? styles.subpage0
              : currentSubpage === 1
              ? styles.subpage1
              : styles.subpage2)
          }
        >
          <div className={styles.subpageContainer}
            style={{
              maxHeight: currentSubpage === 0 ? "100%" : "0",
            }}
          >
            <div className={styles.subpage}>
              <ResumePreface />
            </div>
            <div
              className={styles.selectorContainer}
              style={{
                width: "100%",
              }}
            >
              {["General", "Appearance", "Content"].map((name, i) => (
                <button
                  className={
                    styles.selector +
                    " " +
                    (currentResumePage === i ? styles.selected : "")
                  }
                  key={name}
                  onClick={() => {
                    setCurrentResumePage(i);
                  }}
                >
                  {name}
                </button>
              ))}
            </div>
            <div
              className={styles.subpagesWrapper}
              style={{
                width: "100%",
                margin: "0 auto",
              }}
            >
              <div
                className={
                  styles.subpagesContainer +
                  " " +
                  (currentResumePage === 0
                    ? styles.subpage0
                    : currentResumePage === 1
                    ? styles.subpage1
                    : styles.subpage2)
                }
              >
                <div
                  className={styles.subpageContainer}
                  style={{
                    maxHeight: currentResumePage === 0 ? "100%" : "0",
                  }}
                >
                  <div className={styles.subpage}>
                    <ResumeGeneral />
                  </div>
                </div>
                <div
                  className={styles.subpageContainer}
                  style={{
                    maxHeight: currentResumePage === 1 ? "100%" : "0",
                  }}
                >
                  <div className={styles.subpage}>
                    <ResumeAppearance />
                  </div>
                </div>
                <div
                  className={styles.subpageContainer}
                  style={{
                    maxHeight: currentResumePage === 2 ? "100%" : "0",
                  }}
                >
                  <div className={styles.subpage}>
                    <ResumeContent />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.subpageContainer}
            style={{
              maxHeight: currentSubpage === 1 ? "100%" : "0",
            }}
          >
            <div className={styles.subpage}>
              <InterviewPreface />
            </div>
            <div
              className={styles.selectorContainer}
              style={{
                width: "100%",
              }}
            >
              {["General", "Behavioural", "Technical"].map((name, i) => (
                <button
                  className={
                    styles.selector +
                    " " +
                    (currentInterviewPage === i ? styles.selected : "")
                  }
                  key={name}
                  onClick={() => {
                    setCurrentInterviewPage(i);
                  }}
                >
                  {name}
                </button>
              ))}
            </div>
            <div
              className={styles.subpagesWrapper}
              style={{
                width: "100%",
                margin: "0 auto",
              }}
            >
              <div
                className={
                  styles.subpagesContainer +
                  " " +
                  (currentInterviewPage === 0
                    ? styles.subpage0
                    : currentInterviewPage === 1
                    ? styles.subpage1
                    : styles.subpage2)
                }
              >
                <div
                  className={styles.subpageContainer}
                  style={{
                    maxHeight: currentInterviewPage === 0 ? "100%" : "0",
                  }}
                >
                  <div className={styles.subpage}>
                    <InterviewGeneral />
                  </div>
                </div>
                <div
                  className={styles.subpageContainer}
                  style={{
                    maxHeight: currentInterviewPage === 1 ? "100%" : "0",
                  }}
                >
                  <div className={styles.subpage}>
                    <InterviewBehavioural />
                  </div>
                </div>
                <div
                  className={styles.subpageContainer}
                  style={{
                    maxHeight: currentInterviewPage === 2 ? "100%" : "0",
                  }}
                >
                  <div className={styles.subpage}>
                    <InterviewTechnical />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className={styles.subpageContainer}
            style={{
              maxHeight: currentSubpage === 2 ? "100%" : "0",
            }}
          >
            <div className={styles.subpage}>
              <Resources />
            </div>
          </div>
        </div>
      </div>
      <DefaultLayout>
        <ConnectWithUs />
        <EmailSignup />
      </DefaultLayout>
    </>
  );
}

Internships.Layout = function InternshipsLayout(props: { children: React.ReactNode }) {
  return <div className={styles.page}>{props.children}</div>;
};

Internships.getShapesConfig = (() => {
  const desktopConfig = {
    cross: [
      {
        top: "calc(16rem / 16)",
        left: "calc(-78rem / 16)",
        width: "calc(150rem / 16)",
        height: "calc(150rem / 16)",
        transform: "rotate(30deg)",
      },
    ],
    dots: [
      {
        top: "calc(520rem / 16)",
        right: "calc(-120rem / 16)",
        width: "calc(292rem / 16)",
        height: "calc(330rem / 16)",
        transform: "rotate(-29deg)",
      },
    ],
    hash: [
      {
        top: "calc(528rem / 16)",
        left: "60vw",
        width: "calc(60rem / 16)",
        height: "calc(60rem / 16)",
      },
      {
        bottom: "calc(440rem / 16)",
        right: "84vw",
        width: "calc(60rem / 16)",
        height: "calc(60rem / 16)",
      },
    ],
    triangle: [
      {
        top: "calc(554rem / 16)",
        right: "80vw",
        width: "calc(68rem / 16)",
        height: "calc(68rem / 16)",
        transform: "rotate(-26deg)",
      },
      {
        top: "calc(2190rem / 16)",
        right: "4vw",
        width: "calc(68rem / 16)",
        height: "calc(68rem / 16)",
        transform: "rotate(-26deg)",
      },
    ],
    waves: [
      {
        top: "calc(1300rem / 16)",
        left: "2vw",
        width: "calc(102rem / 16)",
        height: "calc(50rem / 16)",
      },
    ],
    wavesBig: [
      {
        top: "calc(42rem / 16)",
        right: "calc(-160rem / 16)",
        width: "calc(376rem / 16)",
        height: "calc(132rem / 16)",
      },
      {
        bottom: "calc(40rem / 16)",
        left: "calc(-174rem / 16)",
        width: "calc(376rem / 16)",
        height: "calc(132rem / 16)",
      },
    ],
  };

  if (window.innerWidth <= 768) {
    return mobileShapesConfig;
  }
  return desktopConfig;
}) as GetShapesConfig;