[task] list sponsors of codewithaloha #59

Author: Taiga Chang

src/components/Projects.js

@@ -10,6 +10,7 @@ import projectsImg from "../images/projects.png";
 // import hawaiiZoningAtlasImg from "../images/HawaiiZoningAtlas.png";
 // import hierrImg from "../images/HIERR.png";
 import { getCurrentProjects } from "@/data/webData";
+import Sponsors from "./Sponsors";
 
 export const ProjectCard = ({
   id,
@@ -176,6 +177,7 @@ const Projects = () => {
       </div>
       <HistoricalProjects />
       <Clients />
+      <Sponsors />
     </section>
   );
 };

src/components/Sponsors.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import { getSponsors } from "@/data/webData";
+
+const Sponsers = () => {
+  const [sponsors, setSponsors] = useState([]);
+
+  useEffect(() => {
+    setSponsors(getSponsors());
+  }, []);
+
+  const handleSponsorImageClick = (url) => {
+    window.open(url, "_blank");
+  };
+
+  return (
+    <div className="pt-20">
+      <h2 className="text-4xl xl:text-7xl pt-10 drop-shadow-xl text-center py-20">
+        Sponsors
+      </h2>
+
+      <div className="flex items-center justify-center pb-40">
+        {sponsors.map((sponsor) => (
+          <Image
+            onClick={() => handleSponsorImageClick(sponsor.url)}
+            key={sponsor.id}
+            alt={sponsor.alt}
+            src={sponsor.src}
+            width={sponsor.width}
+            height={sponsor.height}
+            className={sponsor.className}
+            style={{ cursor: "pointer" }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Sponsers;

src/data/webData.js

@@ -18,6 +18,10 @@ import experienceImg from "../images/experience.png";
 import oneImg from "../images/one.png";
 import twoImg from "../images/two.png";
 import threeImg from "../images/three.png";
+import sponsor1Img from "../images/sponsor1.png";
+import sponsor2Img from "../images/sponsor2.png";
+import sponsor3Img from "../images/sponsor3.png";
+import sponsor4Img from "../images/sponsor4.png";
 
 const data = {
   currentProjects: [
@@ -214,6 +218,48 @@ const data = {
       text: "During each meetup, we facilitate breakout rooms tailored to our projects for targeted discussion and planning. Together in these rooms, we drive innovation and progress, contributing to the growth and betterment of our community. Your insights can make a real difference – let's achieve greatness together!",
     },
   ],
+  sponsors: [
+    {
+      id: 1,
+      alt: "HTDC",
+      src: sponsor1Img,
+      width: 500,
+      height: 500,
+      className: "mx-8 h-full  w-1/6 lg:w-1/8 ",
+      hasWebsite: true,
+      url: "https://www.htdc.org/",
+    },
+    {
+      id: 2,
+      alt: "Box Jelly",
+      src: sponsor2Img,
+      width: 500,
+      height: 500,
+      className: "mx-8 h-full w-1/6 lg:w-1/8 ",
+      hasWebsite: true,
+      url: "https://www.theboxjelly.com/",
+    },
+    {
+      id: 3,
+      alt: "Entrepreneur Sandbox",
+      src: sponsor3Img,
+      width: 500,
+      height: 500,
+      className: "mx-8 h-full  w-1/6 lg:w-1/8 ",
+      hasWebsite: true,
+      url: "https://sandboxhawaii.org/",
+    },
+    {
+      id: 4,
+      alt: "Hub Coworking Hawaii",
+      src: sponsor4Img,
+      width: 500,
+      height: 500,
+      className: "mx-8 h-full w-1/6 lg:w-1/8 ",
+      hasWebsite: true,
+      url: "https://hubcoworkinghi.com/",
+    },
+  ],
 };
 
 export const getCurrentProjects = () => {
@@ -237,3 +283,6 @@ export const getFocus = () => {
 export const getExpectations = () => {
   return structuredClone(data.expectations);
 };
+export const getSponsors = () => {
+  return structuredClone(data.sponsors);
+};