finished first draft of resources page and made styling changes

package.json

@@ -9,7 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "14.0.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/material": "^5.15.17",
+    "next": "^15.0.1",
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^6.21.3",

src/app/archive/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+import React, { useContext } from "react";
+import { useRouter } from "next/navigation";
+import NavBar from '../components/NavBar/NavBar';
+import ControlledAccordion from "../components/ControlledAccordion/ControlledAccordion";
+import LinkIcon from '@mui/icons-material/Link';
+import PageHeader from '../components/PageHeader/PageHeader';
+import ArchiveHeader from "../img/archive-header.svg";
+import ArchiveBody from '../components/ArchiveBody/ArchiveBody';
+
+const Archive = (props: any) => {
+
+    const router = useRouter();
+
+    return (
+        <>
+            <NavBar></NavBar>
+            <PageHeader 
+                header="ACM Archive"
+                subheader="A list of the previous workshops given by ACM!"
+                img={ArchiveHeader}
+                imgStyle={{
+                    backgroundSize: "423px 297px",
+                    backgroundPosition: "100%",
+                }}
+            />
+            <ArchiveBody />
+        </>
+    )
+}
+
+export default Archive;

src/app/components/ArchiveBody/ArchiveBody.js

@@ -1,21 +1,23 @@
 import React, {useState} from 'react';
-import teams from '../../data/teams'
-import TeamButton from '../TeamButton/TeamButton'
-import ArchiveCommittee from '../CommitteeArchive/ArchiveCommittee'
+import teams from '../../data/teams';
+import TeamButton from '../TeamButton/TeamButton';
+import ArchiveCommittee from '../ArchiveCommittee/ArchiveCommittee';
 import "./ArchiveBody.css";
 
 function ArchiveBody() {
 
-  const [committee, setCommittee] = useState("studio")
+  const [committee, setCommittee] = useState("Studio")
 
   const refArray = ["Studio", "ICPC", "Design", "Cyber", "Teach LA", "W", "AI", "Hack"]
   const sortedTeams = JSON.parse(JSON.stringify(teams))
+  console.log('here1')
 
   return (
     <div className='ArchiveBody'>
         <div className='button-col'>
             {sortedTeams.sort((a,b) => refArray.indexOf(a.name) - refArray.indexOf(b.name)).map((team) => (team.name !== "Board") && 
             <TeamButton
+                key={team.name}
                 className = 'team-button'
                 icon = {team.logotype}
                 alt = {team.name}

src/app/components/ArchiveCommittee/ArchiveCommittee.css

@@ -0,0 +1,18 @@
+.archive-committee-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.committee-name {
+    font-size: 2.5rem;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.no-resource-msg {
+    font-weight: 600;
+    font-size: 1.2rem;
+}

src/app/components/ArchiveCommittee/ArchiveCommittee.js

@@ -0,0 +1,36 @@
+import React from "react";
+import ArchiveTopicList from "./ArchiveTopicList";
+import resources from '../../data/resources';
+
+import './ArchiveCommittee.css'
+
+const ArchiveCommittee = (props) => {
+    let {committeeName} = props;
+    console.log(committeeName)
+    let filteredList = resources.map((item) => {
+        return {
+            category: item.category,
+            links: item.links.filter((link) => link.source === committeeName), 
+        };
+    });
+    console.log(JSON.stringify(filteredList, null, 2));
+
+    return (
+        <div className="archive-committee-container">
+            <h2 className="committee-name">
+                ACM {committeeName.charAt(0).toUpperCase() + committeeName.slice(1)}
+            </h2>
+            {filteredList.every(item => !item.links[0]) ? (
+                <h4 className='no-resource-msg'>No past resources available at this time.</h4>
+            ) : (
+                filteredList.map((item) => 
+                    item.links[0] && (
+                        <ArchiveTopicList topicName={item.category} resourceList={item.links} />
+                    )
+                )
+            )}
+        </div>
+    );
+}
+
+export default ArchiveCommittee;

src/app/components/ArchiveCommittee/ArchiveTopicList.css

@@ -0,0 +1,19 @@
+.archive-committee-content {
+    width: 80%;
+    margin: 0.5rem 0;
+    box-shadow: 0 .125rem .25rem rgba(0,0,0,.1);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.MuiPaper-root {
+    transition: 0.3s;
+}
+
+.MuiButtonBase-root:hover {
+    background-color: #eee;
+}
+
+.MuiAccordionSummary-content {
+    margin: 20px 0;
+}

src/app/components/ArchiveCommittee/ArchiveTopicList.js

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import DropDownButton from "../DropDownButton/DropDownButton";
+import ControlledAccordion from "../ControlledAccordion/ControlledAccordion";
+
+import './ArchiveTopicList.css';
+
+const ArchiveTopicList = (props) => {
+
+    const [isExpanded, setIsExpanded] = useState(false);
+    let {topicName, resourceList} = props;
+
+    return (
+        <div className="archive-committee-content">
+            <ControlledAccordion
+                topicName={topicName}
+                resourceList={resourceList}
+            ></ControlledAccordion>
+        </div>
+    )
+}
+
+export default ArchiveTopicList;

src/app/components/Clickable/Clickable.css

@@ -1,13 +1,13 @@
 .clickable {
-    background-color: #ffffff00;
+    background-color: transparent;
     border-width: 0px;
     font-size: 18px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     overflow: hidden;
-    border-radius: 10%;
+    /* border-radius: 10%; */
 }
 
 .clickable:hover {
@@ -23,7 +23,7 @@
     content: "";
     position: absolute;
     border-radius: 50%;
-    background-color: #00000015;
+    /* background-color: #00000015; */
     width: 100px;
     height: 100px;
     margin-top: -50px;

src/app/components/ControlledAccordion/ControlledAccordion.css

@@ -0,0 +1,87 @@
+.panel-header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+}
+
+.summary-name {
+    font-size: 1.2rem;
+    line-height: 1.0;
+    font-weight: 500;
+}
+
+/* individual topic links */
+.resources-container {
+    padding: 1rem;
+}
+
+.resource {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    padding: 1.5rem;
+    /* margin-bottom: 2rem; */
+    /* border: 1px solid #ddd; */
+    /* border-radius: 10px; */
+    /* background-color: #fafafa; */
+    /* box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); */
+    border-bottom: 1px solid #ddd;
+    /* transition: 0.3s; */
+}
+
+/* .resource:hover {
+    background-color: #eee;
+    cursor: pointer;
+    transform: scale(1.01);
+} */
+
+.resource-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.resource-name {
+    margin-bottom: 0.3rem;
+}
+
+.resource-difficulty {
+    color: #999;
+    margin-bottom: 1rem;
+}
+
+.article-icon, .video-icon {
+    color: #3338;
+    font-size: 1.5rem;
+    margin: 0 0.25rem;
+    transition: 0.4s;
+}
+
+.article-icon:hover, .video-icon:hover {
+    transform: scale(1.05);
+    color: #1E6CFF;
+}
+
+
+.description {
+    font-size: 0.825rem;
+}
+
+/* .summary-icon {
+    display: flex;
+    align-items: center;
+    padding: 0 0.25rem;
+    text-decoration: none;
+    cursor: pointer;
+    color: blue;
+    transition: 0.1s;
+}
+
+.summary-icon:hover {
+    color: lightblue;
+    transform: scale(1.1);
+}
+
+.summary-icon.visited {
+    color: black;
+    background-color: black;
+} */