chore: create image component to avoid img domain erros

bleu · Oct 2, 2024 · e319502 · e319502
1 parent 517f5fb
commit e319502
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/apps/govquests-frontend/next.config.mjs b/apps/govquests-frontend/next.config.mjs
@@ -1,9 +1,3 @@
 /** @type {import('next').NextConfig} */
-// TODO: DOMAIN JUST FOR TESTING, SHOUDL BE REMOVED OP-298
-const nextConfig = {
-  reactStrictMode: true,
-  images: {
-    domains: ["file.coinexstatic.com"],
-  },
-};
+const nextConfig = {};
 export default nextConfig;
diff --git a/apps/govquests-frontend/src/app/layout.tsx b/apps/govquests-frontend/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        {/* MOCKED HEADER AND SIDE BAR */}
+        {/* MOCKED HEADER AND SIDE BAR, SHOUDL BE REMOVED: OP-299 & OP-300 */}
         <header className="h-16 bg-red-500 flex-1">
           <div />
         </header>

diff --git a/apps/govquests-frontend/src/components/Image.tsx b/apps/govquests-frontend/src/components/Image.tsx
@@ -0,0 +1,29 @@
+import type React from "react";
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+const Image: React.FC<ImageProps> = ({
+  src,
+  alt,
+  width,
+  height,
+  className,
+}) => {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+    />
+  );
+};
+
+export default Image;
diff --git a/apps/govquests-frontend/src/components/Quest.tsx b/apps/govquests-frontend/src/components/Quest.tsx
@@ -1,7 +1,7 @@
 import type { Reward } from "@/types/quest";
-import Image from "next/image";
 import Link from "next/link";
 import type React from "react";
+import Image from "./Image";
 
 interface QuestProps {
   id: string;
@@ -23,7 +23,11 @@ const Quest: React.FC<QuestProps> = ({
   return (
     <div className="flex flex-col bg-red-300 rounded-lg">
       <div className="relative w-full border border-black h-36">
-        <Image src={imageSrc} alt={altText} layout="fill" objectFit="cover" />
+        <Image
+          src={imageSrc}
+          alt={altText}
+          className="object-cover w-full h-full"
+        />
       </div>
       <div className="flex flex-col p-4">
         <h3>{title}</h3>