cat identifier: feat crop image

Author: vraja-nayaka

digit-recognition/frontend/package.json

@@ -16,6 +16,7 @@
     "@tanstack/react-query": "^5.59.20",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-easy-crop": "^5.4.1",
     "wagmi": "^2.12.29"
   },
   "devDependencies": {

digit-recognition/frontend/src/components/index.ts

@@ -3,3 +3,5 @@ export { Layout } from "./layout/Layout";
 export { WalletButton } from "./wallet/WalletButton";
 export { Button } from "./ui/button/Button";
 export { Card } from "./ui/card/Card";
+export { Modal } from "./ui/modal";
+export { ImageCrop } from "./ui/image-crop";

digit-recognition/frontend/src/components/ui/button/Button.tsx

@@ -38,6 +38,7 @@ const Button: React.FC<ButtonProps> = ({
       onClick={onClick}
       disabled={isDisabled}
       aria-disabled={isDisabled}
+      type="button"
     >
       {isLoading ? (
         <LoadingIcon className={styles["animate-spin"]} />

digit-recognition/frontend/src/components/ui/image-crop/image-crop.module.scss

@@ -0,0 +1,21 @@
+.crop-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+}
+
+.cropContainer {
+  position: relative;
+  width: 100%;
+  height: 300px;;
+  background: #000;
+  margin-bottom: 16px;
+}
+
+.cropControls {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

digit-recognition/frontend/src/components/ui/image-crop/image-crop.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useCallback } from "react";
+import Cropper, { Area } from "react-easy-crop";
+
+import { getCroppedImg } from "@/lib/utils";
+
+import styles from "./image-crop.module.scss";
+import { Button } from "../button/Button";
+
+type Props = {
+  image: string;
+  onClose: () => void;
+  onCropComplete: (croppedImage: Blob) => void;
+};
+
+const ImageCrop: React.FC<Props> = ({ image, onClose, onCropComplete }) => {
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+
+  const onCropDone = async () => {
+    if (!croppedAreaPixels) return;
+    const croppedImage = await getCroppedImg(image, croppedAreaPixels);
+    onCropComplete(croppedImage);
+    onClose();
+  };
+
+  const onCropCompleteHandler = useCallback(
+    (_croppedArea: Area, croppedPixels: Area) => {
+      setCroppedAreaPixels(croppedPixels);
+    },
+    []
+  );
+
+  return (
+    <div className={styles.cropModal}>
+      <div className={styles.cropContainer}>
+        <Cropper
+          image={image}
+          crop={crop}
+          zoom={zoom}
+          aspect={1}
+          onCropChange={setCrop}
+          onZoomChange={setZoom}
+          onCropComplete={onCropCompleteHandler}
+          
+        />
+      </div>
+      <div className={styles.cropControls}>
+        <Button variant="outline" onClick={onCropDone}>
+          CROP
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export { ImageCrop };

digit-recognition/frontend/src/components/ui/image-crop/index.ts

@@ -0,0 +1 @@
+export { ImageCrop } from "./image-crop";

digit-recognition/frontend/src/components/ui/modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from "./modal";

digit-recognition/frontend/src/components/ui/modal/modal.module.scss

@@ -0,0 +1,25 @@
+.dialog {
+  padding: 16px;
+  width: 438px;
+  background-color: #000;
+  border: 1px solid #ffffff80;
+  color: #fff;
+
+  &::backdrop {
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+  }
+}

…set/frontend/src/components/ui/Modal.tsx …ontend/src/components/ui/modal/modal.tsxmandelbrot-set/frontend/src/components/ui/Modal.tsx renamed to digit-recognition/frontend/src/components/ui/modal/modal.tsx mandelbrot-set/frontend/src/components/ui/Modal.tsx renamed to digit-recognition/frontend/src/components/ui/modal/modal.tsx

@@ -1,16 +1,26 @@
+import clsx from "clsx";
 import { ReactNode, useEffect, useRef, MouseEvent } from "react";
+
 import CrossIcon from "@/assets/icons/cross.svg?react";
 import { Button } from "@/components";
-import { cn } from "@/lib/utils";
+
+import styles from "./modal.module.scss";
 
 type Props = {
   heading?: string;
   children: ReactNode;
   onClose: () => void;
   className?: string;
+  closeOnBackdropClick?: boolean;
 };
 
-function Modal({ heading, children, onClose, className }: Props) {
+function Modal({
+  heading,
+  children,
+  onClose,
+  className,
+  closeOnBackdropClick = false,
+}: Props) {
   const ref = useRef<HTMLDialogElement>(null);
 
   const disableScroll = () => document.body.classList.add("modal-open");
@@ -36,30 +46,24 @@ function Modal({ heading, children, onClose, className }: Props) {
   const handleClick = ({ target }: MouseEvent) => {
     const isBackdropClick = target === ref.current;
 
-    if (isBackdropClick) onClose();
+    if (isBackdropClick && closeOnBackdropClick) onClose();
   };
 
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <dialog
       ref={ref}
       onClick={handleClick}
-      className={cn(
-        "flex justify-center items-center backdrop:backdrop-filter backdrop:backdrop-blur backdrop:bg-[#00000099]",
-        className
-      )}
+      className={clsx(styles.dialog, className)}
     >
-      <div className="p-4 w-[438px] bg-black border border-muted-foreground text-white">
-        <header className="flex justify-between items-start mb-4 w-full">
-          <h2>{heading}</h2>
+      <header className={styles.header}>
+        <h2>{heading}</h2>
 
-          <Button variant="link" onClick={onClose}>
-            <CrossIcon />
-          </Button>
-        </header>
+        <Button variant="link" size="icon" onClick={onClose}>
+          <CrossIcon />
+        </Button>
+      </header>
 
-        {children}
-      </div>
+      {children}
     </dialog>
   );
 }