sumanthk123 · Sep 11, 2023 · Sep 12, 2023 · Sep 12, 2023
diff --git a/src/pages/sample.lectures.json → lectures/sample.lectures.json b/src/pages/sample.lectures.json → lectures/sample.lectures.json
diff --git a/src/App.js b/src/App.js
@@ -14,11 +14,11 @@ const App = () => {
             <StyledContainer>
                 <Header />
                 <Routes>
-                    <Route path="/" element={
+                    <Route path="/quantum-computing" element={
                         <Home />
                     } />
 
-                    <Route path="/resources" element={
+                    <Route path="/quantum-computing/resources" element={
                         <Resources />
                     } />
                 </Routes>

diff --git a/src/Header.js b/src/Header.js
@@ -24,13 +24,13 @@ const Link = ({ to, ...props }) => {
 const Header = () => {
     return (
         <StyledHeader>
-            <StyledTitle href="/">
+            <StyledTitle href="/quantum-computing">
                 TJ QC Club
             </StyledTitle>
             {window.innerHeight < 500 || window.innerWidth < 500 ?
                 <Dropdown />
             :
-                <Link to="/resources" styles={{ marginRight: "3em" }}>Resources</Link>
+                <Link to="/quantum-computing/resources" styles={{ marginRight: "3em" }}>Resources</Link>
             }
         </StyledHeader>
     )

diff --git a/src/components/containers/Years.js b/src/components/containers/Years.js
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react"
+import styled from "styled-components"
+
+const Years = ({ children, style, rowStyle }) => {
+    const [select, setSelect] = useState(Object.keys(children)[0])
+
+    useEffect(() => {
+        setSelect(Object.keys(children)[0])
+    }, [children])
+
+    return (
+        <div style={style}>
+            <StyledRow style={rowStyle}>
+                {Object.keys(children).map((y) => {
+                    return <StyledTab key={y} selected={y == select} onClick={() => {
+                        setSelect(y)
+                    }}>{y}</StyledTab>
+                })}
+            </StyledRow>
+            {children[select]}
+        </div>
+    )
+}
+
+const StyledTab = styled.div`
+    width: auto;
+    padding: 0.25em 1em;
+    background: ${props => props.selected ? "#608799" : "0"};
+    transition-duration: 0.3s;
+    color: ${props => props.selected ? "white" : "black"};
+    border-radius: 0.3em;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        ${props => props.selected ? "" : "background: #c8e9f7;"}
+        transition-duration: 0.2s;
+    }
+`
+
+const StyledRow = styled.div`
+    display: flex;
+    margin-top: 1em;
+    gap: 1em;
+`
+
+export default Years
diff --git a/src/components/containers/index.js b/src/components/containers/index.js
@@ -1 +1,2 @@
-export { default as Row } from "./Row"
+export { default as Row } from "./Row"
+export { default as Years } from "./Years"
diff --git a/src/pages/Officers.js b/src/pages/Officers.js
@@ -1,38 +1,64 @@
 import React from "react"
 import styled from "styled-components"
 
-import { Row } from "../components/containers"
+import { Row, Years } from "../components/containers"
 import { Image, Title } from "../components/elements"
 import { mobileCheck } from "../util"
 
 import William from "./william.jpg"
 import Karthik from "./karthik.jpg"
 import Neha from "./neha.png"
 import Sumanth from "./sumanth.jpg"
+import Connor from "./connor.jpg"
+import David from "./david.jpg"
 
 const Officers = () => {
     return (
         <OfficersContainer>
             <Title>Meet the Officers!</Title>
-            {mobileCheck() ? (
-                <div>
-                    <Officer src={Sumanth}>Sumanth Kalluru</Officer>
-                    <Officer flip src={William}>William Black</Officer>
-                    <Officer src={Karthik}>Karthik Thyagarajan</Officer>
-                    <Officer flip src={Neha}>Neha Chandran</Officer>
-                </div>
-            ) : (
-                <div>
-                    <Row>
+            <Years>{{
+                "2023-2024": mobileCheck() ? (
+                    <div>
+                        <Officer flip src={William}>William Black</Officer>
+                        <Officer src={Karthik}>Karthik Thyagarajan</Officer>
+                        <Officer flip src={Neha}>Neha Chandran</Officer>
+                        <Officer src={Connor}>Connor Whiting</Officer>
+                        <Officer flip src={David}>David Cao</Officer>
+                    </div>
+                ) : (
+                    <div>
+                        <Row>
+                            <Officer src={William}>William Black</Officer>
+                            <Officer src={Karthik}>Karthik Thyagarajan</Officer>
+                        </Row>
+                        <Row>
+                            <Officer flip src={Neha}>Neha Chandran</Officer>
+                            <Officer flip src={Connor}>Connor Whiting</Officer>
+                        </Row>
+                        <div>
+                            <Officer styles={{ marginLeft: "auto", marginRight: "auto" }} src={David}>David Cao</Officer>
+                        </div>
+                    </div>
+                ), "2022-2023": mobileCheck() ? (
+                    <div>
                         <Officer src={Sumanth}>Sumanth Kalluru</Officer>
-                        <Officer src={William}>William Black</Officer>
-                    </Row>
-                    <Row>
-                        <Officer flip src={Karthik}>Karthik Thyagarajan</Officer>
+                        <Officer flip src={William}>William Black</Officer>
+                        <Officer src={Karthik}>Karthik Thyagarajan</Officer>
                         <Officer flip src={Neha}>Neha Chandran</Officer>
-                    </Row>
-                </div>
-            )}
+                    </div>
+                ) : (
+                    <div>
+                        <Row>
+                            <Officer src={Sumanth}>Sumanth Kalluru</Officer>
+                            <Officer src={William}>William Black</Officer>
+                        </Row>
+                        <Row>
+                            <Officer flip src={Karthik}>Karthik Thyagarajan</Officer>
+                            <Officer flip src={Neha}>Neha Chandran</Officer>
+                        </Row>
+                    </div>
+                )
+            }}</Years>
         </OfficersContainer>
     )
 }
@@ -45,15 +71,15 @@ const OfficersContainer = styled.div`
 const Officer = ({ src, children, flip, styles }) => {
     if (flip) {
         return (
-            <OfficerContainer flip={flip} styles={styles}>
+            <OfficerContainer flip={flip} style={styles}>
                 {children}
                 <Image src={src} />
             </OfficerContainer>
         )
     }
 
     return (
-        <OfficerContainer styles={styles}>
+        <OfficerContainer style={styles}>
             <Image src={src} />
             {children}
         </OfficerContainer>

diff --git a/src/pages/Resources.js b/src/pages/Resources.js
@@ -1,30 +1,46 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import styled from "styled-components"
 
 import { Title } from "../components/elements"
+import { Years } from "../components/containers"
 import { PageContainer, PageContentContainer } from "./PageContainer"
-import lectureData from "./lectures.json"
 import { mobileCheck } from "../util"
 
 import { ReactComponent as RawNewTab } from "./new_tab.svg"
 
 const Resources = () => {
+    const [lectures, setLectures] = useState({})
+
+    useEffect(() => {
+        fetch("/quantum-computing/lectures").then((response) => {
+            return response.json()
+        }).then((lectureData) => {
+            setLectures(Object.fromEntries(Object.keys(lectureData).map((y) => {
+                return [y,
+                    <>
+                        {(lectureData[y].beginner ? (
+                            <>
+                                <SectionTitle>Beginner Lectures</SectionTitle>
+                                <Lectures full lectures={lectureData[y].beginner} />
+                            </>
+                        ) : null)}
+                        {(lectureData[y].advanced ? (
+                            <>
+                                <SectionTitle>Advanced Lectures</SectionTitle>
+                                <Lectures full lectures={lectureData[y].advanced} color="#ff1c5c" />
+                            </>
+                        ) : null)}
+                    </>
+                ]
+            })))
+        })
+    }, [])
+
     return (
         <PageContainer>
             <PageContentContainer>
                 <Title>Resources</Title>
-                {lectureData.beginner ? (
-                    <>
-                        <SectionTitle>Beginner Lectures</SectionTitle>
-                        <Lectures lectures={lectureData.beginner} />
-                    </>
-                ) : null}
-                {lectureData.advanced ? (
-                    <>
-                        <SectionTitle>Advanced Lectures</SectionTitle>
-                        <Lectures lectures={lectureData.advanced} color="#ff1c5c" />
-                    </>
-                ) : null}
+                <Years style={{ width: "80%" }} rowStyle={{ marginBottom: "2em" }}>{lectures}</Years>
 
                 <SectionTitle>Good Resources</SectionTitle>
                 <Lecture href="https://cs.uwaterloo.ca/~watrous/QC-notes/" big color="#f5a925">John Watrous' Lecture Notes</Lecture>
@@ -45,12 +61,12 @@ const SectionTitle = styled.div`
     font-family: Poppins;
 `
 
-const Lectures = ({ lectures, color }) => {
+const Lectures = ({ lectures, color, full }) => {
     return (
         <StyledLecturesContainer>
             {lectures.map(lecture => {
                 return (
-                    <Lecture color={color} key={lecture.file} href={"/" + lecture.file}>{lecture.name}</Lecture>
+                    <Lecture full={full} color={color} key={lecture.file} href={"/quantum-computing/" + lecture.file}>{lecture.name}</Lecture>
                 )
             })}
         </StyledLecturesContainer>
@@ -65,9 +81,9 @@ const StyledLecturesContainer = styled.div`
     margin-bottom: 2em;
 `
 
-const Lecture = ({ href, children, color, big }) => {
+const Lecture = ({ href, children, color, big, full }) => {
     return (
-        <StyledLectureContainer color={color} big={big}>
+        <StyledLectureContainer full={full} color={color} big={big}>
             {children}
             <NewTab href={href} />
         </StyledLectureContainer>
@@ -80,7 +96,8 @@ const StyledLectureContainer = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    ${mobileCheck() ?
+    width: calc(100% - 1.5em - var(--left-border));
+    ${props => mobileCheck()||props.full ?
         `width: calc(100% - 1.5em - var(--left-border))`
     :
         `width: calc(80% - 1.5em - var(--left-border))`

diff --git a/src/pages/connor.jpg b/src/pages/connor.jpg
diff --git a/src/pages/david.jpg b/src/pages/david.jpg
diff --git a/src/pages/karthik.jpg b/src/pages/karthik.jpg
diff --git a/src/pages/neha.png b/src/pages/neha.png