suggested changes for PR

Code-the-Change-YYC · Feb 18, 2024 · cb8e197 · cb8e197
1 parent 4ed7c33
commit cb8e197
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 30 deletions.
diff --git a/components/PastEventImage.jsx b/components/PastEventImage.jsx
@@ -1,46 +1,36 @@
 import Image from 'next/image';
-
+import { rgbDataURL } from '../utils/blurImage';
 const PAST_EVENTS_IMAGE =
-  'w-65 h-65 p-2 md:w-60 md:h-60 md:mx-4 lg:w-92 lg:h-92 lg:w-1/3 lg:mx-1 rounded-3xl drop-shadow-md relative';
+  '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 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 className="flex overflow-x">
       {/* Display only the first image on small screens */}
       <div className="md:hidden lg:hidden">
-        <Image
-          className={PAST_EVENTS_IMAGE}
-          src={`https:${images[0].fields.file.url}`}
-          alt={images[0].fields.title}
-          width={images[0].fields.file.details.image.width}
-          height={images[0].fields.file.details.image.height}
-        />
+        <PastEventImageComponent eventImages={[images[0]]} />
       </div>
       {/* Display only the first two images on medium screens */}
       <div className="hidden md:flex lg:hidden">
-        {images.slice(0, 2).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}
-          />
-        ))}
+        <PastEventImageComponent eventImages={images.slice(0, 2)} />
       </div>
       {/* Display all images on large screens */}
       <div className="hidden lg:flex">
-        {images.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}
-          />
-        ))}
+        <PastEventImageComponent eventImages={images} />
       </div>
     </div>
   );

diff --git a/utils/blurImage.js b/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==`;