Feat/Create Universal Image Component

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",

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";
 

src/components/image/Image.tsx

@@ -1,29 +1,26 @@
-import { FC } from "react";
+import { CSSProperties, FC } from "react";
 import Image from "next/image";
 
 type Image = {
   image: string;
   width: number;
   height: number;
   altText: string;
-  caption: string;
-  attribution: string;
+  sizes?: string;
+  style?: CSSProperties;
   alignment: "left" | "center" | "right";
 };
 
-// const [isHovering, setIsHovering] = useState(false)
-
 const Images: FC<Image> = ({
   image,
   width,
   height,
   altText,
-  caption,
-  attribution,
   alignment,
+  sizes,
+  style,
 }) => {
   let flexAlignment = getFlexAlignment(alignment);
-  let textAlignment = getTextAlignment(alignment);
 
   return (
     <div className={`flex ${flexAlignment}`}>
@@ -33,12 +30,15 @@ const Images: FC<Image> = ({
         }}
       >
         <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>
-        <p className={`text-neutral-500 text-sm ${textAlignment}`}>
-          Photo Credit: {attribution}
-        </p>
-        <p className={`${textAlignment}`}>{caption}</p>
       </div>
     </div>
   );
@@ -55,13 +55,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";
-  }
-};

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";
+  }
+};