Merge branch 'main' of https://github.com/webimpactuw/mesh

Author: JustinTham511

.gitignore

@@ -35,3 +35,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# testing
+app/testEvents/page.js
+app/testEvents/layout.js
+app/testEvents/components/EventsTest.js

app/about/page.js

@@ -1,19 +1,35 @@
 'use client'
-import { dataset } from "@/sanity/env";
 import localFont from "next/font/local"
 import Slider from "react-slick";
 import "../globals.css";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-import { useState } from 'react'
-
+import { useState, useEffect } from 'react'
+import { client } from "@/sanity/lib/client";
+import { urlForImage } from "@/sanity/lib/image";
 
 const fabulous = localFont({
   src: '../static-fonts/fabulous.otf',
   display: 'swap',
 })
 
-export default function about() {
+async function getMembers() {
+
+  const query = `*[_type == "members"] {
+    name,
+    title,
+    class,
+    major,
+    image,
+  }`
+
+  const members = await client.fetch(query)
+  return members;
+}
+
+function BoardMembersBlock() {
+  const [members, setMembers] = useState([]);
+
   const settings = {
     dots: true,
     infinite: true,
@@ -23,6 +39,48 @@ export default function about() {
     prevArrow: <SamplePrevArrow />
   }
 
+  useEffect(() => {
+      async function fetchMembers() {
+          const fetchedMembers = await getMembers();
+          setMembers(fetchedMembers);
+      }
+
+      fetchMembers();
+  }, []);
+
+  const allMembers = [...members];
+
+  return (
+    <Slider {...settings}>
+      {allMembers.map((d) => (
+        <div className = "mt-2 sm:mt-8 flex">
+
+          {/* Headshot */}
+          <div className = "mt-1 justify-end flex headshot">
+            <div className="w-1 h-20 sm:h-44 sm:w-2 bg-[#43B697]"></div>
+            <div className="w-1 h-20 sm:h-44 sm:w-2 bg-[#282828]"></div>
+            {/* Image */}
+            <img src={urlForImage(d.image)} alt="" className="h-20 w-20 sm:h-44 sm:w-44 border border-white"/>
+          </div>
+
+          {/* Board Member Information */}
+          <div className = "flex member-info text-white">
+            <div className = "sm:mt-5 flex flex-col items-center">
+            <h1 className="sm:text-xl md:text-2xl">{d.name}</h1>
+              <div className="w-auto sm:h-3 bg-[#282828]"></div>
+              <h1 className="text-base sm:text-xl font-light">{d.title}</h1>
+              <h1 className="text-base sm:text-xl font-light">{d.class}</h1>
+              <h1 className="text-base sm:text-xl font-light">{d.major}</h1>
+              <div className="w-auto h-8 sm:h-20 bg-[#282828]"></div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </Slider>
+  );
+}
+
+export default function about() {
   const [selected, setSelected] = useState(null)
 
   const toggle = (i) => {
@@ -46,30 +104,27 @@ export default function about() {
         {/* IMAGES */}
         {/* Left 1/3 image layout */}
         <div className="w-2/5 bg-black-200">
-          <div className="flex-col">
+          <div className="grid grid-cols-1 sm:grid-cols-2 items-center">
 
-            {/* Left half images */}
-            <div className="w-1/2">
-              {/* Full-size image */}
-              <img className="h-auto w-full" src="/about images/About1.jpeg" alt="Image 1" />
-            </div>
+            {/* Full size image */}
+            <img className="w-3/4 h-auto sm:w-full ml-2 mt-8" src="/about images/About1.jpeg" alt="Image 1" />
 
-            {/* Right half images */}
-            <div className="w-1/2 flex flex-col">
-            <div className="bg-black-200 p-8"></div>
+            <div className="flex-col">
+            <div className="bg-black-200"></div>
               {/* First half-size image */}
-              <img className="h-auto w-3/4 mb-4 mx-5" src="/about images/About2.jpeg" alt="Image 2" />
+              <div className="bg-black-200 mb-4 sm:h-20"></div>
+              <img className="h-auto w-3/4 ml-2 mb-4 sm:mx-5" src="/about images/About2.jpeg" alt="Image 2" />
 
               {/* Second half-size image */}
-              <img className="h-auto w-full mx-5" src="/about images/About3.jpeg" alt="Image 3" />
+              <img className="w-3/4 h-auto ml-2 sm:w-full sm:mx-5" src="/about images/About3.jpeg" alt="Image 3" />
             </div>
 
           </div>
         </div>
 
         {/* WHO ARE WE - TEXT CONTENT */}
-        <div className="flex justify-end sm:pr-8 w-2/3">
-          <div className="w-5/6 sm:w-4/5">
+        <div className="flex justify-center pr-5 sm:pr-8 w-2/3">
+          <div className="sm:w-4/5">
           <div className="bg-black-200 p-4 mt-5 sm:mt-20">
           {/* Green line */}
           <div className="w-1/2 h-2 bg-[#43B697]"></div>
@@ -84,7 +139,7 @@ export default function about() {
           </div>
         </div>
       </div>
-      <div className="h-8 sm: h-16"></div>
+      <div className="h-8 sm:h-16"></div>
 
       {/* BOARD MEMBERS SLIDER */}
       <div className = "latest-events">
@@ -94,37 +149,12 @@ export default function about() {
 
         <div className="w-3/4 m-auto">
           <div>
-            <Slider {...settings}>
-            {members.map((d) => (
-              <div className = "mt-2 sm:mt-8 flex">
-
-                {/* Headshot */}
-                <div className = "mt-1 justify-end flex headshot">
-                  <div className="w-1 h-20 sm:h-44 sm:w-2 bg-[#43B697]"></div>
-                  <div className="w-1 h-20 sm:h-44 sm:w-2 bg-[#282828]"></div>
-                  {/* Image */}
-                  <img src={d.img} alt="" className="h-20 w-20 sm:h-44 sm:w-44 border border-white"/>
-                </div>
-
-                {/* Board Member Information */}
-                <div className = "flex member-info text-white">
-                  <div className = "sm:mt-5 flex flex-col items-center">
-                  <h1 className="sm:text-xl md:text-2xl">{d.name}</h1>
-                    <div className="w-auto sm:h-3 bg-[#282828]"></div>
-                    <h1 className="text-base sm:text-xl font-light">{d.title}</h1>
-                    <h1 className="text-base sm:text-xl font-light">{d.class}</h1>
-                    <h1 className="text-base sm:text-xl font-light">{d.major}</h1>
-                    <div className="w-auto h-8 sm:h-20 bg-[#282828]"></div>
-                  </div>
-                </div>
-              </div>
-            ))}
-            </Slider>
+            <BoardMembersBlock />
           </div>
         </div>
 
       </div>
-      <div className="h-8 sm: h-16"></div>
+      <div className="h-8 sm:h-16"></div>
 
       {/* FAQS section */}
       <div className={fabulous.className}>
@@ -152,51 +182,11 @@ export default function about() {
         </div>
         <div className="h-10"></div>
       </div>
-      /* 
-      <div className="flex">
-        <div className = "flex left-wrapper">
-          <div className = "accordian">
-            
-              {left_questions.map((item, i) => (
-                <div className="item">
-                  <div className = "title" onClick={() => toggle(i)}>
-                    <h2>{item.question}</h2>
-                    <span>{selected === i ? '-' : '+'}</span>
-                  </div>
-
-                  <div className = {selected === i ? 'content-show font-light' : 'content'}>
-                      {item.answer}
-                  </div>
-                </div>
-              ))}
-
-          </div>
-        </div>
-
-        <div className = "flex right-wrapper">
-          <div className = "accordian">
-            
-              {right_questions.map((item, i) => (
-                <div className="item">
-                  <div className = "title" onClick={() => toggle(i)}>
-                    <h2>{item.question}</h2>
-                    <span>{selected === i ? '-' : '+'}</span>
-                  </div>
-
-                  <div className = {selected === i ? 'content-show font-light' : 'content'}>
-                      {item.answer}
-                  </div>
-                </div>
-              ))}
-
-          </div>
-        </div>
-        */
   );
 }
 
 {/* BOARD MEMBERS AND HEADSHOTS */}
-const members = [
+const membersmap = [
   {
       name: 'Amy (she/they)',
       title: 'President',
@@ -262,30 +252,6 @@ const questions = [
   }
 ];
 
-{/* LEFT COLUMN QUESTIONS - NOT USED */}
-const left_questions = [
-  {
-    question: 'Does Mesh have office hours?',
-    answer: 'Yes. Come to MESH Office Hours every Friday 5-7PM in the MILL!',
-  },
-  {
-    question: 'How competitive is it to get into Mesh?',
-    answer: 'Answer to Question 3.',
-  },
-];
-
-{/* RIGHT COLUMN QUESTIONS - NOT USED */}
-const right_questions = [
-  {
-    question: 'When’s the quarterly meeting?',
-    answer: 'Answer to Question 2.',
-  },
-  {
-    question: 'Where can I find the application form?',
-    answer: 'Answer to Question 4.',
-  }
-];
-
 {/* CUSTOM ARROWS */}
 function SampleNextArrow(props) {
   const { className, style, onClick } = props;
@@ -308,3 +274,5 @@ function SamplePrevArrow(props) {
     />
   );
 }
+
+

app/archive/page.js

@@ -45,8 +45,8 @@ function ArchiveBlock({sortBy}) {
     });
     return (
         <ul className="grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center">
-        {archives.map((archive) => (
-            <div className="flex flex-col items-center">
+        {sortedArchives.map((archive) => (
+            <div key={archive._id} className="flex flex-col items-center">
                 <div className="flex items-center h-80 w-80 ">
                     <img src= {urlForImage(archive.image)} className="border-2 h-full w-full object-cover" alt={archive.alt} />
                 </div>
@@ -74,7 +74,7 @@ export default function ArchivePage() {
                 <h1 className={fabulous.className}>ARCHIVE</h1>
             </header>
             <div className="text-center mb-10 text-white">
-                <p1>View photo albums and program booklets from past MESH events</p1>
+                <p>View photo albums and program booklets from past MESH events</p>
             </div>
             <div className="flex flex-row-reverse mr-10 mb-10">
                 <button onClick={handleSortToggle} class="bg-[#43B697] rounded-lg w-40 p-1 text-xl">

app/events/.layout.js.swp

@@ -0,0 +1,98 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import LearnButton from './LearnButton';
+import { Jost } from 'next/font/google';
+
+
+// couldnt figure out the file pathToString, copied this into the events folder
+import localFont from "next/font/local"
+import { urlForImage } from '@/sanity/lib/image';
+
+const fabulous = localFont({
+  src: '/static-fonts/fabulous.otf',
+  display: 'swap',
+})
+
+const jost = Jost({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['300', '400', '600'], 
+})
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: '#373737',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+  height: 600,
+};
+
+export default function BasicModal({title, date, time, location, description, imageUrl}) {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      {/* <Button onClick={handleOpen}>Open modal</Button> */}
+      {/* <LearnButton onClick={handleOpen} /> */}
+
+      <div class="flex flex-row m-auto justify-center">
+        <div class="flex flex-row m-auto justify-center">
+        <button onClick={handleOpen} class="text-[#FFFFFF] font-sans text-lg font-light">Learn More </button>
+        <img src="/arrowup.png" alt="arrow" class="h-10"/>
+        </div>
+    </div>
+
+
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style} >
+            <div className={fabulous.className}>
+          <Typography id="modal-modal-title" variant="h6" component="h2" class="text-center text-white text-2xl">
+            {title}
+          </Typography>
+          </div>
+          <div class="w-90 overflow-hidden h-56 text-white pb-2">
+          <img src={urlForImage(imageUrl)} alt={title}/>
+          </div>
+          
+          <div className={jost.className}>
+            <div id="time" class="text-white flex flex-row gap-x-4 py-4 text-lg font-light ">
+              <img src="/clock_.png" alt='clock' />
+              <p>{date}, {time}</p>
+
+            </div>
+            <div id="location" class="text-white flex flex-row gap-x-4 py-4 text-xl font-light">
+              <img src="/location.png" alt='clock' class="ml-1"/>
+              <p>{location}</p>
+
+            </div>
+
+            <div className={jost.className}>
+            <Typography class="pt-4 font-extralight text-white text-lg" id="modal-modal-description" sx={{ mt: 2 }}>
+              {description}
+            </Typography>
+            </div>
+          </div>
+          
+        </Box>
+      </Modal>
+    </div>
+  );
+}