Deleting Image Done

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>
                        ))
                     }