From 067f66b1461124ca4a098db10c8149aaf8c4482e Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sat, 14 May 2022 14:18:06 +0200
Subject: [PATCH] Added onClick to Img component

---
 src/components/Img.tsx | 41 ++++++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/Img.tsx b/src/components/Img.tsx
index 3ee57a4..ac73aff 100644
--- a/src/components/Img.tsx
+++ b/src/components/Img.tsx
@@ -2,41 +2,40 @@ import { UploadImageFragment } from "graphql/generated";
 import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
 import { ImageProps } from "next/image";
+import { MouseEventHandler } from "react";
 
 interface Props {
   className?: string;
   image?: UploadImageFragment | string;
   quality?: ImageQuality;
   alt?: ImageProps["alt"];
+  onClick?: MouseEventHandler<HTMLImageElement>;
 }
 
 export default function Img(props: Immutable<Props>): JSX.Element {
-  if (typeof props.image === "string") {
+  const {
+    className,
+    image,
+    quality = ImageQuality.Small,
+    alt,
+    onClick,
+  } = props;
+
+  if (typeof image === "string") {
+    return (
+      <img className={className} src={image} alt={alt ?? ""} loading="lazy" />
+    );
+  } else if (image?.width && image.height) {
+    const imgSize = getImgSizesByQuality(image.width, image.height, quality);
     return (
       <img
-        className={props.className}
-        src={props.image}
-        alt={props.alt ?? ""}
-        loading="lazy"
-      />
-    );
-  } else if (props.image?.width && props.image.height) {
-    const imgSize = getImgSizesByQuality(
-      props.image.width,
-      props.image.height,
-      props.quality ?? ImageQuality.Small
-    );
-    return (
-      <img
-        className={props.className}
-        src={getAssetURL(
-          props.image.url,
-          props.quality ? props.quality : ImageQuality.Small
-        )}
-        alt={props.alt ?? props.image.alternativeText ?? ""}
+        className={className}
+        src={getAssetURL(image.url, quality)}
+        alt={alt ?? image.alternativeText ?? ""}
         width={imgSize.width}
         height={imgSize.height}
         loading="lazy"
+        onClick={onClick}
       />
     );
   }