From 54c2608e0298ef070f633e493a05253ba7602954 Mon Sep 17 00:00:00 2001
From: igiallan <igiallan@umich.edu>
Date: Wed, 10 Jul 2024 09:17:52 -0400
Subject: [PATCH] Community Image components added. Update community images
 through config/communityImages.json

---
 components/communityImages.jsx | 23 +++++++++++++++++++++++
 config/communityImages.json    | 11 +++++++++++
 pages/index.jsx                | 32 +++++---------------------------
 3 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 components/communityImages.jsx
 create mode 100644 config/communityImages.json

diff --git a/components/communityImages.jsx b/components/communityImages.jsx
new file mode 100644
index 0000000..a2d0012
--- /dev/null
+++ b/components/communityImages.jsx
@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+export default function CommunityImages({ images, basePath }) {
+  return (
+    <div className="flex flex-col sm:flex-row items-center mx-auto max-w-6xl">
+      {images.map((image, index) => (
+        <div key={index} className="w-full sm:w-1/2 mx-4 mb-6 flex flex-col justify-center items-center">
+          <p className="text-base mt-2">{image.name}</p>
+          <Image
+            width={500}
+            height={500}
+            src={
+              basePath
+                ? `${basePath}/images/community/${image.image}`
+                : `/images/community/${image.image}`
+            }
+            alt={image.name}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/config/communityImages.json b/config/communityImages.json
new file mode 100644
index 0000000..f654435
--- /dev/null
+++ b/config/communityImages.json
@@ -0,0 +1,11 @@
+[
+    {
+      "name": "WN24 Project Expo",
+      "image": "WN24_EXPO.JPG"
+    },
+    {
+      "name": "WN24 Data Science Night",
+      "image": "WN24_DSN.JPG"
+    }
+  ]
+  
\ No newline at end of file
diff --git a/pages/index.jsx b/pages/index.jsx
index 9740366..70e5b8b 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -7,13 +7,14 @@ import SponsorSection from "@/components/sponsorSection";
 import Timeline from "@/components/timeline";
 import Wave from "@/components/wave";
 import Wave180 from "@/components/wave180";
+import CommunityImages from "@/components/communityImages";
 import loadStaticData from "@/shared/static";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
-export default function Home({ sponsors, projects, timeline }) {
+export default function Home({ sponsors, projects, timeline, communityImages }) {
   sponsors[0].tier = "MDST is made possible by our sponsors";
   const router = useRouter();
   const basePath = router.basePath;
@@ -119,7 +120,7 @@ export default function Home({ sponsors, projects, timeline }) {
         </div>
       </div>
       <Carousel projects={projects} basePath={basePath} />
-      <CommunityImages basePath={basePath} />
+      <CommunityImages basePath={basePath} images={communityImages} />
       <div className="container mx-auto px-2 mt-8">
         <h2 className="text-3xl text-center">
           MDST is proudly supported by our sponsors
@@ -151,30 +152,6 @@ function ProjectCard({ json, basePath }) {
     </Link>
   );
 }
-function CommunityImages({ basePath }) {
-  return (
-    <div className="flex flex-col sm:flex-row items-center mx-auto max-w-6xl">
-      <div className="w-full sm:w-1/2 mx-4 mb-6 flex flex-col justify-center items-center">
-        <p className="text-base mt-2">WN24 Project Expo</p>
-        <Image
-          src={`${basePath}/images/community/WN24_EXPO.JPG`}
-          alt="Image 1"
-          width={500}
-          height={500}
-        />
-      </div>
-      <div className="w-full sm:w-1/2 mx-4 mb-6 flex flex-col justify-center items-center">
-        <p className="text-base mt-2">WN24 Data Science Night</p>
-        <Image
-          src={`${basePath}/images/community/WN24_DSN.JPG`}
-          alt="Image 2"
-          width={500}
-          height={500}
-        />
-      </div>
-    </div>
-  );
-}
 
 function Factbox({ fact, closer }) {
   return (
@@ -243,6 +220,7 @@ export async function getStaticProps() {
   const sponsors = loadStaticData("sponsors.json");
   const projects = loadStaticData("homepage.json");
   const timeline = loadStaticData("timeline.json");
+  const communityImages = loadStaticData("communityImages.json");
 
-  return { props: { sponsors, projects, timeline } };
+  return { props: { sponsors, projects, timeline, communityImages } };
 }