Connect past events to Contentful

components/PastEventImage.jsx

@@ -1,15 +1,37 @@
 import Image from 'next/image';
+import { rgbDataURL } from '../utils/blurImage';
+const PAST_EVENTS_IMAGE =
+  'w-65 h-65 md:w-60 md:h-60 md:mx-4 lg:w-92 lg:h-92 lg:w-1/3 lg:mx-1 object-cover rounded-3xl drop-shadow-md relative';
 
-const PAST_EVENTS_IMAGE = 'w-65 h-65 p-2 md:w-60 md:h-60 lg:w-92 lg:h-92 mx-1 lg:mx-3 rounded-3xl drop-shadow-md relative';
-
-const PastEventImage = ({img, name}) => {
+const PastEventImageComponent = ({ eventImages }) => {
+  return eventImages.map((image, index) => (
+    <Image
+      key={index}
+      className={`${PAST_EVENTS_IMAGE}`}
+      src={`https:${image.fields.file.url}`}
+      alt={image.fields.title}
+      width={image.fields.file.details.image.width}
+      height={image.fields.file.details.image.height}
+      placeholder="blur"
+      blurDataURL={rgbDataURL()}
+    />
+  ));
+};
+const PastEventImage = ({ images }) => {
   return (
-    <div>
-      <Image 
-        className={PAST_EVENTS_IMAGE} 
-        src={img} 
-        alt={name} 
-      />
+    <div className="flex overflow-x">
+      {/* Display only the first image on small screens */}
+      <div className="md:hidden lg:hidden">
+        <PastEventImageComponent eventImages={[images[0]]} />
+      </div>
+      {/* Display only the first two images on medium screens */}
+      <div className="hidden md:flex lg:hidden">
+        <PastEventImageComponent eventImages={images.slice(0, 2)} />
+      </div>
+      {/* Display all images on large screens */}
+      <div className="hidden lg:flex">
+        <PastEventImageComponent eventImages={images} />
+      </div>
     </div>
   );
 };

components/PastEventsCarousel.jsx

@@ -3,7 +3,6 @@ import { SwiperSlide } from 'swiper/react';
 import Tile from '../components/Tile';
 import TextSection from './TextSection';
 import Carousel from '../components/Carousel';
-import { PAST_EVENTS } from '../data/events';
 import styles from '../components/RolesCarousel.module.css';
 import Heading from './Heading';
 import { UnderlineTypes } from '../utils/underlineType';
@@ -16,7 +15,8 @@ const ARROW_INIT = { left: 'swiper-button-prev', right: 'swiper-button-next' };
 const LEFT_NAVIGATION_ARROW = styles.swiperButtonPrev;
 const RIGHT_NAVIGATION_ARROW = styles.swiperButtonNext;
 
-const TILE_CONTAINER = 'flex flex-col xl:h-[650px] lg:h-[820px] md:flex-column md:h-[820px] h-[930px] rounded-[30px] p-[1.875rem]';
+const TILE_CONTAINER =
+  'flex flex-col xl:h-[650px] lg:h-[820px] md:flex-column md:h-[820px] h-[930px] rounded-[30px] p-[1.875rem]';
 const TILE_IMAGE_CONTAINER = 'flex flex-row justify-center md:flex-row md:justify-around lg:justify-center relative';
 const TILE_TEXT_CONTAINER = 'basis-3/5 md:basis-3/5 lg:basis-3/5 text-center md:py-10 ';
 const TILE_TEXT_SPACING = 'lg:space-y-10 py-5';
@@ -27,59 +27,62 @@ const PAST_EVENTS_HEADER = 'flex flex-row';
 
 const LONG_SQUIGGLY_LINE_SVG = '/svgs/events/long_events_squiggly_line.svg';
 
-const PastEventsTile = ({ event }) => (
+const PastEventsTile = ({ pastEvent }) => (
   <Tile classes={TILE_CONTAINER}>
-    <div className='md:hidden lg:hidden'>
-      <h2 className='text-center text-5xl font-medium italic mb-2'>{event.name}</h2>
+    <div className="md:hidden lg:hidden">
+      <h2 className="text-center text-5xl font-medium italic mb-2">{pastEvent.eventName}</h2>
     </div>
     <div className={TILE_IMAGE_CONTAINER}>
       <div>
-        <PastEventImage img={event.img1} name={event.name} />
-      </div>
-      <div className='hidden md:block lg:block'>
-        <PastEventImage img={event.img2} name={event.name} />
-      </div>
-      <div className='hidden md:hidden lg:block'>
-        <PastEventImage img={event.img3} name={event.name} />
+        <PastEventImage images={pastEvent.images} />
       </div>
     </div>
     <div className={TILE_TEXT_CONTAINER}>
-      <h2 className='hidden md:block lg:block text-4xl md:text-6xl xl:text-6xl font-medium italic'>{event.name}</h2>
+      <h2 className="hidden md:block lg:block text-4xl md:text-6xl xl:text-6xl font-medium italic">
+        {pastEvent.eventName}
+      </h2>
       <div className={TILE_TEXT_SPACING}>
-        <p className='text-[1.5em] md:text-[2rem] xl:text-[2rem] font-[500] py-3'>{event.blurb}</p>
+        <p className="text-[1.5em] md:text-[2rem] xl:text-[2rem] font-[500] py-3">
+          {pastEvent.description.content[0].content[0].value}
+        </p>
       </div>
     </div>
   </Tile>
 );
 
-const PastEventsCarousel = () => {
+const PastEventsCarousel = ({ pastEvent }) => {
   return (
     <div className={PAST_EVENTS_CONTAINER}>
       <div className={PAST_EVENTS_CONTENT}>
         <div className={PAST_EVENTS_HEADER}>
-          <Heading classes='text-white' underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>Past Events</Heading>
+          <Heading classes="text-white" underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>
+            Past Events
+          </Heading>
         </div>
-        <TextSection classes='text-white'>Here is an archive of some of the cool events we have held in the past! Whether you are interested in joining our team or attending one of our events,{' '}
-          <Link href='/contact' className='text-[#7055FD]'>please feel free to reach out to us!</Link>
+        <TextSection classes="text-white">
+          Here is an archive of some of the cool events we have held in the past! Whether you are interested in joining
+          our team or attending one of our events,{' '}
+          <Link href="/contact" className="text-[#7055FD]">
+            please feel free to reach out to us!
+          </Link>
         </TextSection>
         <div className={CAROUSEL_CONTAINER}>
           <div className={`${ARROW_INIT.left} ${LEFT_NAVIGATION_ARROW}`}></div>
           <Carousel navigation={{ prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next', clickable: true }}>
-            {PAST_EVENTS.map((event) => (
-              <SwiperSlide key={event.name}>
-                <PastEventsTile event={event} />
+            {pastEvent.map((pastEvent) => (
+              <SwiperSlide key={pastEvent.name}>
+                <PastEventsTile pastEvent={pastEvent} />
               </SwiperSlide>
             ))}
           </Carousel>
           <div className={`${ARROW_INIT.right} ${RIGHT_NAVIGATION_ARROW}`}></div>
         </div>
       </div>
-      <div className='md:my-10 w-full h-48 xl:h-64 relative'>
-        <Image src={LONG_SQUIGGLY_LINE_SVG} alt='' layout='fill' objectFit='cover' />
+      <div className="md:my-10 w-full h-48 xl:h-64 relative">
+        <Image src={LONG_SQUIGGLY_LINE_SVG} alt="" layout="fill" objectFit="cover" />
       </div>
     </div>
   );
 };
 
-
 export default PastEventsCarousel;

pages/events/index.js

@@ -6,28 +6,17 @@ import { fetchContent } from '../../api/apiRoot';
 
 export async function getStaticProps() {
   const event = await fetchContent('upcomingEvents');
-  return { props: { event } };
+  const pastEvent = await fetchContent('pastEvents');
+  return { props: { event, pastEvent } };
 }
 
-const Events = ({ event }) => {
-  // const placeholder = 'Events page';
+const Events = ({ event, pastEvent }) => {
   return (
-    // <div className="flex flex-col w-full mt-5 md:mt-0 lg:mt-0">
     <div className="flex flex-col w-full mt-5 md:mt-0 lg:mt-0 ">
-      {/* For each section here, try to do it as a component then just import here so it's easier to work on.
-			Below are just sample names, if you think it should use a better name, feel free to change it
-
-			<UpcomingEvents/>
-			<HackathonTimeline/>
-			<PastEvents/>
-
-      <h1 className="m-auto text-3xl text-center">
-        We`re currently building the <b>Events Page</b> so stay tuned! 👀
-      </h1> */}
       <EventsBanner />
       <UpcomingEvents event={event} />
       <HackathonTimeline />
-      <PastEventsCarousel />
+      <PastEventsCarousel pastEvent={pastEvent} />
     </div>
   );
 };

utils/blurImage.js

@@ -6,7 +6,8 @@ const triplet = (e1, e2, e3) =>
   keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
   keyStr.charAt(e3 & 63);
 
-export const rgbDataURL = (r, g, b) =>
+// Color defaults to grey
+export const rgbDataURL = (r = 192, g = 192, b = 192) =>
   `data:image/gif;base64,R0lGODlhAQABAPAA${
     triplet(0, r, g) + triplet(b, 255, 255)
   }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;