From 9a76799692d4d5a5c427a437cdaab6189629b5b8 Mon Sep 17 00:00:00 2001
From: Faye <dominic@stilma.net>
Date: Mon, 24 Jun 2024 22:13:43 +0200
Subject: [PATCH] fix ts warnings for <img

---
 .../account/gallery/[galleryId]/page.client.tsx     |  1 +
 .../account/gallery/upload/page.client.tsx          |  1 +
 .../(account)/account/idcard/page.client.jsx        |  2 ++
 .../(main)/announcements/[announcementId]/page.tsx  |  1 +
 .../(main)/gallery/[galleryId]/page.client.tsx      | 13 ++++++++-----
 src/components/account/profile/mfaAlert.tsx         |  1 +
 src/components/account/uploadAvatar.tsx             |  1 +
 src/components/account/uploadBanner.tsx             |  1 +
 8 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/app/[locale]/(account)/account/gallery/[galleryId]/page.client.tsx b/src/app/[locale]/(account)/account/gallery/[galleryId]/page.client.tsx
index ae2f0f2c..56460f78 100644
--- a/src/app/[locale]/(account)/account/gallery/[galleryId]/page.client.tsx
+++ b/src/app/[locale]/(account)/account/gallery/[galleryId]/page.client.tsx
@@ -126,6 +126,7 @@ export default function FetchGallery({ singleGallery }) {
   return (
     <div className="flex-wrap items-center justify-center gap-4 p-8">
       <div className="mx-auto flex">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={getGalleryImageUrl(singleGallery.galleryId)}
           alt={singleGallery.imgAlt || 'Headpat Community Image'}
diff --git a/src/app/[locale]/(account)/account/gallery/upload/page.client.tsx b/src/app/[locale]/(account)/account/gallery/upload/page.client.tsx
index 81a4296c..b6944ba0 100644
--- a/src/app/[locale]/(account)/account/gallery/upload/page.client.tsx
+++ b/src/app/[locale]/(account)/account/gallery/upload/page.client.tsx
@@ -160,6 +160,7 @@ export default function UploadPage() {
                 >
                   <div className="text-center">
                     <Label className="rounded-md bg-gray-900 font-semibold text-white focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 focus-within:ring-offset-gray-900 hover:text-indigo-500">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
                       <img
                         id="selected-image"
                         className="mx-auto h-96 min-w-full rounded-md object-contain cursor-pointer"
diff --git a/src/app/[locale]/(account)/account/idcard/page.client.jsx b/src/app/[locale]/(account)/account/idcard/page.client.jsx
index debce99c..4fd03d59 100644
--- a/src/app/[locale]/(account)/account/idcard/page.client.jsx
+++ b/src/app/[locale]/(account)/account/idcard/page.client.jsx
@@ -160,6 +160,7 @@ export default function PageClient() {
       {error && <ErrorMessage attentionError={error} />}
       <div className="mx-auto my-8 max-w-7xl text-center">
         {/* TODO: Change image */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src="/images/badgefront.webp"
           alt="Badge Preview"
@@ -195,6 +196,7 @@ export default function PageClient() {
                         onDrop={handleDrop}
                         onDragOver={(event) => event.preventDefault()}
                       >
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
                         <img
                           id="selected-image"
                           className="h-32 w-32 rounded-md object-contain"
diff --git a/src/app/[locale]/(main)/announcements/[announcementId]/page.tsx b/src/app/[locale]/(main)/announcements/[announcementId]/page.tsx
index 1f6697e0..2a7699b8 100644
--- a/src/app/[locale]/(main)/announcements/[announcementId]/page.tsx
+++ b/src/app/[locale]/(main)/announcements/[announcementId]/page.tsx
@@ -56,6 +56,7 @@ export default async function Page({
                   }}
                   passHref
                 >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
                     className="mr-4 h-12 w-12 flex-none rounded-full"
                     src={getAvatarImageUrl(
diff --git a/src/app/[locale]/(main)/gallery/[galleryId]/page.client.tsx b/src/app/[locale]/(main)/gallery/[galleryId]/page.client.tsx
index d5495590..4b432229 100644
--- a/src/app/[locale]/(main)/gallery/[galleryId]/page.client.tsx
+++ b/src/app/[locale]/(main)/gallery/[galleryId]/page.client.tsx
@@ -12,10 +12,13 @@ export default function FetchGallery({ name, gallery }) {
 
   // The rest of the component remains unchanged with conditional rendering based on the data's availability.
   return (
-    <img
-      src={url}
-      alt={name || 'Headpat Community Image'}
-      className={`imgsinglegallery mx-auto h-[400px] w-auto max-w-full rounded-lg object-contain`}
-    />
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={url}
+        alt={name || 'Headpat Community Image'}
+        className={`imgsinglegallery mx-auto h-[400px] w-auto max-w-full rounded-lg object-contain`}
+      />
+    </>
   )
 }
diff --git a/src/components/account/profile/mfaAlert.tsx b/src/components/account/profile/mfaAlert.tsx
index e1a521f9..9040c863 100644
--- a/src/components/account/profile/mfaAlert.tsx
+++ b/src/components/account/profile/mfaAlert.tsx
@@ -137,6 +137,7 @@ export default function MfaAlert({ mfaList }) {
               <div>
                 {mfaMode === 'totpEnable' && (
                   <>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
                       src={qrCodeImage}
                       className={'h-64 w-auto mb-4'}
diff --git a/src/components/account/uploadAvatar.tsx b/src/components/account/uploadAvatar.tsx
index 9d12cb96..6083b5b4 100644
--- a/src/components/account/uploadAvatar.tsx
+++ b/src/components/account/uploadAvatar.tsx
@@ -150,6 +150,7 @@ export default function UploadAvatar({
       <span>Profile image</span>
       <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
         <div className="col-span-full flex items-center gap-x-8">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             id="avatar-image"
             src={
diff --git a/src/components/account/uploadBanner.tsx b/src/components/account/uploadBanner.tsx
index d7160d15..122dbbb4 100644
--- a/src/components/account/uploadBanner.tsx
+++ b/src/components/account/uploadBanner.tsx
@@ -150,6 +150,7 @@ export default function UploadBanner({
       <span>Banner image</span>
       <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
         <div className="col-span-full flex items-center gap-x-8">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             id="banner-image"
             src={