From d2ceb5007e1f1ee20f2623064a0b2ea8fbeb4b32 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Wed, 6 Apr 2022 14:45:04 +0430
Subject: [PATCH] Deleting Image Done

---
 src/view/addProduct/components/addPic.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/view/addProduct/components/addPic.js b/src/view/addProduct/components/addPic.js
index e5227c8..2e049b0 100644
--- a/src/view/addProduct/components/addPic.js
+++ b/src/view/addProduct/components/addPic.js
@@ -6,6 +6,7 @@ const AddPic = () => {
     const [selectedImage, setSelectedImage] = useState(null);
     const [fakeState, setFakeState] = useState(5);
     const [deleteFirst, setDeleteFirst] = useState(false)
+    const [deleteImage, setDeleteImage] = useState(null);
     
     useEffect(() => {
         if (selectedImage) {
@@ -42,7 +43,19 @@ const AddPic = () => {
                 <div className="flex flex-wrap items-center">
                     {
                        imageUrl.slice(1,imageUrl.length).map((item, index) => (
+                           <div className="w-14 h-14 rounded-xl  flex flex-col justify-center items-center" onMouseOver={() => {setDeleteImage(index); console.log(index)}}
+                                onMouseLeave={() => setDeleteImage(null)}
+                           >
                            <img src={item} className="w-14 h-14 m-2 rounded-md"/>
+                           {
+                               deleteImage == index && <div className="absolute w-14 z-10 h-14 rounded-md bg-black bg-opacity-50  flex items-center justify-center">
+                               <img src={trashIcon} className="w-1/3 h-1/3 cursor-pointer" onClick={() => {
+                                   let newImageArray = imageUrl.filter((itm, idx) => idx !== index + 1);
+                                   setImageUrl(newImageArray)
+                               }}/>
+                       </div>
+                           }
+                           </div>
                        ))
                     }