Img extends img

src/components/Img.tsx

@@ -1,47 +1,40 @@
-import { ImageProps } from "next/image";
+import { DetailedHTMLProps, ImgHTMLAttributes } from "react";
-import { MouseEventHandler } from "react";
 import { UploadImageFragment } from "graphql/generated";
-import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
+import { getAssetURL, ImageQuality } from "helpers/img";
 
 /*
  *                                         ╭─────────────╮
  * ────────────────────────────────────────╯  CONSTANTS  ╰──────────────────────────────────────────
  */
 
-interface Props {
+interface Props
-  className?: string;
+  extends Omit<
-  image?: UploadImageFragment | string;
+    DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
+    "src"
+  > {
+  src: UploadImageFragment | string;
   quality?: ImageQuality;
-  alt?: ImageProps["alt"];
-  onClick?: MouseEventHandler<HTMLImageElement>;
 }
 
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const Img = ({
   className,
-  image,
+  src: rawSrc,
   quality = ImageQuality.Small,
   alt,
-  onClick,
+  loading = "lazy",
+  ...otherProps
 }: Props): JSX.Element => {
-  if (typeof image === "string") {
+  const src =
-    return (
+    typeof rawSrc === "string" ? rawSrc : getAssetURL(rawSrc.url, quality);
-      <img className={className} src={image} alt={alt ?? ""} loading="lazy" />
+  return (
-    );
+    <img
-  } else if (image?.width && image.height) {
+      className={className}
-    const imgSize = getImgSizesByQuality(image.width, image.height, quality);
+      src={src}
-    return (
+      alt={alt}
-      <img
+      loading={loading}
-        className={className}
+      {...otherProps}
-        src={getAssetURL(image.url, quality)}
+    />
-        alt={alt ?? image.alternativeText ?? ""}
+  );
-        width={imgSize.width}
-        height={imgSize.height}
-        loading="lazy"
-        onClick={onClick}
-      />
-    );
-  }
-  return <></>;
 };

src/components/Library/ScanSet.tsx

@@ -235,7 +235,7 @@ export const ScanSet = ({
                   openLightBox(images, index);
                 }}
               >
-                <Img image={page.attributes} quality={ImageQuality.Small} />
+                <Img src={page.attributes} quality={ImageQuality.Small} />
               </div>
             ))}
           </div>

src/components/Library/ScanSetCover.tsx

@@ -180,7 +180,7 @@ export const ScanSetCover = ({
                   openLightBox(imgs, index);
                 }}
               >
-                <Img image={image} quality={ImageQuality.Small} />
+                <Img src={image} quality={ImageQuality.Small} />
               </div>
             ))}
           </div>

src/components/LightBox.tsx

@@ -90,7 +90,7 @@ export const LightBox = ({
 
               <Img
                 className="max-h-full min-h-fit [grid-area:image]"
-                image={images[index]}
+                src={images[index]}
               />
 
               <div className="[grid-area:right]">

src/components/Markdown/Markdawn.tsx

@@ -284,7 +284,7 @@ export const Markdawn = ({
                   }}
                 >
                   <Img
-                    image={
+                    src={
                       compProps.src.startsWith("/uploads/")
                         ? getAssetURL(compProps.src, ImageQuality.Small)
                         : compProps.src

src/components/PreviewCard.tsx

@@ -148,7 +148,7 @@ export const PreviewCard = ({
             {thumbnail && (
               <Img
                 className="opacity-30"
-                image={thumbnail}
+                src={thumbnail}
                 quality={ImageQuality.Medium}
               />
             )}
@@ -164,7 +164,7 @@ export const PreviewCard = ({
             {thumbnail && (
               <Img
                 className="opacity-70"
-                image={thumbnail}
+                src={thumbnail}
                 quality={ImageQuality.Medium}
               />
             )}
@@ -193,7 +193,7 @@ export const PreviewCard = ({
               ),
               cIf(thumbnailForceAspectRatio, "h-full w-full object-cover")
             )}
-            image={thumbnail}
+            src={thumbnail}
             quality={ImageQuality.Medium}
           />
           {stackNumber > 0 && (

src/components/PreviewLine.tsx

@@ -41,7 +41,7 @@ export const PreviewLine = ({
       <div className="aspect-[3/2] h-full">
         <Img
           className="h-full object-cover"
-          image={thumbnail}
+          src={thumbnail}
           quality={ImageQuality.Medium}
         />
       </div>

src/components/RecorderChip.tsx

@@ -29,7 +29,7 @@ export const RecorderChip = ({ recorder, langui }: Props): JSX.Element => (
           {recorder.avatar?.data?.attributes && (
             <Img
               className="w-20 rounded-full border-4 border-mid"
-              image={recorder.avatar.data.attributes}
+              src={recorder.avatar.data.attributes}
               quality={ImageQuality.Small}
             />
           )}

src/components/ThumbnailHeader.tsx

@@ -53,7 +53,7 @@ export const ThumbnailHeader = ({
           {thumbnail ? (
             <Img
               className="cursor-pointer rounded-xl"
-              image={thumbnail}
+              src={thumbnail}
               quality={ImageQuality.Medium}
               onClick={() => {
                 openLightBox([getAssetURL(thumbnail.url, ImageQuality.Large)]);

src/helpers/numbers.ts

@@ -24,3 +24,13 @@ export const randomInt = (min: number, max: number): number =>
 
 export const isInteger = (value: string): boolean =>
   /^[+-]?[0-9]+$/u.test(value);
+
+export const clamp = (
+  value: number,
+  minValue: number,
+  maxValue: number
+): number => {
+  if (value > maxValue) return maxValue;
+  if (value < minValue) return minValue;
+  return value;
+};

src/pages/library/[slug]/index.tsx

@@ -172,7 +172,7 @@ const LibrarySlug = ({
           >
             {item.thumbnail?.data?.attributes ? (
               <Img
-                image={item.thumbnail.data.attributes}
+                src={item.thumbnail.data.attributes}
                 quality={ImageQuality.Large}
                 className="h-full w-full object-contain"
               />
@@ -273,7 +273,7 @@ const LibrarySlug = ({
                       <Img
                         className="h-full w-full rounded-lg
                         bg-light object-cover drop-shadow-shade-md"
-                        image={galleryItem.attributes}
+                        src={galleryItem.attributes}
                       />
                     </div>
                   </Fragment>

src/pages/wiki/[slug]/index.tsx

@@ -112,7 +112,7 @@ const WikiPage = ({
             >
               {page.thumbnail?.data?.attributes && (
                 <Img
-                  image={page.thumbnail.data.attributes}
+                  src={page.thumbnail.data.attributes}
                   quality={ImageQuality.Medium}
                   className="w-full cursor-pointer"
                   onClick={() => {