From 2f861516b95ac2e5e43cc7809abc359532f84bfb Mon Sep 17 00:00:00 2001
From: Noel Castillon <noelcastillon1@gmail.com>
Date: Wed, 27 Nov 2024 17:24:18 +0000
Subject: [PATCH 1/3] feat: create universal image component

---
 package.json                             |  1 -
 src/components/about-us/BoardMembers.tsx |  2 +-
 src/components/image/Image.tsx           | 29 +-----------------------
 3 files changed, 2 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index fb9a42da..6da70c1f 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "eslint": "8.57.1",
     "eslint-config-love": "101.0.0",
     "eslint-config-next": "15.0.3",
-    "eslint-config-love": "101.0.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-n": "17.14.0",
     "eslint-plugin-promise": "7.2.1",
diff --git a/src/components/about-us/BoardMembers.tsx b/src/components/about-us/BoardMembers.tsx
index 43f8c30b..df840f8a 100644
--- a/src/components/about-us/BoardMembers.tsx
+++ b/src/components/about-us/BoardMembers.tsx
@@ -1,4 +1,4 @@
-import ImageComponent from "@/components/image/Image";
+import ImageComponent from "@/components/image/ImageWithCaption";
 import { FC } from "react";
 import boardSrc from "../../../public/images/about-us/board.jpg";
 
diff --git a/src/components/image/Image.tsx b/src/components/image/Image.tsx
index f82b4771..ae0ab395 100644
--- a/src/components/image/Image.tsx
+++ b/src/components/image/Image.tsx
@@ -6,24 +6,11 @@ type Image = {
   width: number;
   height: number;
   altText: string;
-  caption: string;
-  attribution: string;
   alignment: "left" | "center" | "right";
 };
 
-// const [isHovering, setIsHovering] = useState(false)
-
-const Images: FC<Image> = ({
-  image,
-  width,
-  height,
-  altText,
-  caption,
-  attribution,
-  alignment,
-}) => {
+const Images: FC<Image> = ({ image, width, height, altText, alignment }) => {
   let flexAlignment = getFlexAlignment(alignment);
-  let textAlignment = getTextAlignment(alignment);
 
   return (
     <div className={`flex ${flexAlignment}`}>
@@ -35,10 +22,6 @@ const Images: FC<Image> = ({
         <div className="relative">
           <Image src={image} alt={altText} height={height} width={width} />
         </div>
-        <p className={`text-neutral-500 text-sm ${textAlignment}`}>
-          Photo Credit: {attribution}
-        </p>
-        <p className={`${textAlignment}`}>{caption}</p>
       </div>
     </div>
   );
@@ -55,13 +38,3 @@ export const getFlexAlignment = (alignment: string) => {
     return "justify-center";
   }
 };
-
-export const getTextAlignment = (alignment: string) => {
-  if (alignment === "right") {
-    return "text-right";
-  } else if (alignment === "left") {
-    return "text-left";
-  } else {
-    return "text-center";
-  }
-};

From 3f88a3876a8b54196b9ff8ecf5c5c29f427716a2 Mon Sep 17 00:00:00 2001
From: Noel Castillon <noelcastillon1@gmail.com>
Date: Wed, 27 Nov 2024 17:29:40 +0000
Subject: [PATCH 2/3] feat: add revised imagewithcaption component

---
 src/components/image/ImageWithCaption.tsx | 67 +++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/image/ImageWithCaption.tsx

diff --git a/src/components/image/ImageWithCaption.tsx b/src/components/image/ImageWithCaption.tsx
new file mode 100644
index 00000000..2792a53b
--- /dev/null
+++ b/src/components/image/ImageWithCaption.tsx
@@ -0,0 +1,67 @@
+import { FC } from "react";
+import Image from "next/image";
+
+type ImageWithCaption = {
+  image: string;
+  width: number;
+  height: number;
+  altText: string;
+  caption?: string;
+  attribution?: string;
+  alignment: "left" | "center" | "right";
+};
+
+const ImagesWithCaption: FC<ImageWithCaption> = ({
+  image,
+  width,
+  height,
+  altText,
+  caption,
+  attribution,
+  alignment,
+}) => {
+  let flexAlignment = getFlexAlignment(alignment);
+  let textAlignment = getTextAlignment(alignment);
+
+  return (
+    <div className={`flex ${flexAlignment}`}>
+      <div
+        style={{
+          width: width,
+        }}
+      >
+        <div className="relative">
+          <Image src={image} alt={altText} height={height} width={width} />
+        </div>
+        {attribution && (
+          <p className={`text-neutral-500 text-sm ${textAlignment}`}>
+            Photo Credit: {attribution}
+          </p>
+        )}
+        {caption && <p className={`${textAlignment}`}>{caption}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default ImagesWithCaption;
+
+export const getFlexAlignment = (alignment: string) => {
+  if (alignment === "right") {
+    return "justify-end";
+  } else if (alignment === "left") {
+    return "justify-start";
+  } else {
+    return "justify-center";
+  }
+};
+
+export const getTextAlignment = (alignment: string) => {
+  if (alignment === "right") {
+    return "text-right";
+  } else if (alignment === "left") {
+    return "text-left";
+  } else {
+    return "text-center";
+  }
+};

From 58f993ab2236dd5aec09f382bc071afe1ff76901 Mon Sep 17 00:00:00 2001
From: Noel Castillon <noelcastillon1@gmail.com>
Date: Wed, 27 Nov 2024 18:26:23 +0000
Subject: [PATCH 3/3] feat: add sizes and style props

---
 src/components/image/Image.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/image/Image.tsx b/src/components/image/Image.tsx
index ae0ab395..484682d5 100644
--- a/src/components/image/Image.tsx
+++ b/src/components/image/Image.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { CSSProperties, FC } from "react";
 import Image from "next/image";
 
 type Image = {
@@ -6,10 +6,20 @@ type Image = {
   width: number;
   height: number;
   altText: string;
+  sizes?: string;
+  style?: CSSProperties;
   alignment: "left" | "center" | "right";
 };
 
-const Images: FC<Image> = ({ image, width, height, altText, alignment }) => {
+const Images: FC<Image> = ({
+  image,
+  width,
+  height,
+  altText,
+  alignment,
+  sizes,
+  style,
+}) => {
   let flexAlignment = getFlexAlignment(alignment);
 
   return (
@@ -20,7 +30,14 @@ const Images: FC<Image> = ({ image, width, height, altText, alignment }) => {
         }}
       >
         <div className="relative">
-          <Image src={image} alt={altText} height={height} width={width} />
+          <Image
+            src={image}
+            alt={altText}
+            height={height}
+            width={width}
+            sizes={sizes}
+            style={style}
+          />
         </div>
       </div>
     </div>