Deleting the First Image Works

src/assets/img/trash.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0697 5.23C19.4597 5.07 17.8497 4.95 16.2297 4.86V4.85L16.0097 3.55C15.8597 2.63 15.6397 1.25 13.2997 1.25H10.6797C8.34967 1.25 8.12967 2.57 7.96967 3.54L7.75967 4.82C6.82967 4.88 5.89967 4.94 4.96967 5.03L2.92967 5.23C2.50967 5.27 2.20967 5.64 2.24967 6.05C2.28967 6.46 2.64967 6.76 3.06967 6.72L5.10967 6.52C10.3497 6 15.6297 6.2 20.9297 6.73C20.9597 6.73 20.9797 6.73 21.0097 6.73C21.3897 6.73 21.7197 6.44 21.7597 6.05C21.7897 5.64 21.4897 5.27 21.0697 5.23Z" fill="#fff"/>
+<path d="M19.2297 8.14C18.9897 7.89 18.6597 7.75 18.3197 7.75H5.67975C5.33975 7.75 4.99975 7.89 4.76975 8.14C4.53975 8.39 4.40975 8.73 4.42975 9.08L5.04975 19.34C5.15975 20.86 5.29975 22.76 8.78975 22.76H15.2097C18.6997 22.76 18.8398 20.87 18.9497 19.34L19.5697 9.09C19.5897 8.73 19.4597 8.39 19.2297 8.14ZM13.6597 17.75H10.3297C9.91975 17.75 9.57975 17.41 9.57975 17C9.57975 16.59 9.91975 16.25 10.3297 16.25H13.6597C14.0697 16.25 14.4097 16.59 14.4097 17C14.4097 17.41 14.0697 17.75 13.6597 17.75ZM14.4997 13.75H9.49975C9.08975 13.75 8.74975 13.41 8.74975 13C8.74975 12.59 9.08975 12.25 9.49975 12.25H14.4997C14.9097 12.25 15.2497 12.59 15.2497 13C15.2497 13.41 14.9097 13.75 14.4997 13.75Z" fill="#fff"/>
+</svg>

src/components/input/signUpInput.js

@@ -22,35 +22,35 @@ const inputStatusHandler = (value, focus, status, primary, success, danger) => {
   }
 };
 
-export default function Input(props) {
+export default function Input({ backgroundColor,
+  lang,
+  theme,
+  inputMode,
+  label,
+  status,
+  maxLength,
+  message,
+  onChange,
+  align,
+  name,
+  regex,
+  direction,
+  width,
+
+  title,
+  borderType,
+  gapSize,
+  id,
+  type,
+  className,
+  style,
+  bg}) {
   const [value, setValue] = useState("");
   const [focusToggle, setFocusToggle] = useState(false);
 
-  const {
+  // const {
-    backgroundColor,
+   
-    lang,
+  // } = props;
-    theme,
-    inputMode,
-    label,
-    status,
-    maxLength,
-    message,
-    onChange,
-    align,
-    name,
-    regex,
-    direction,
-    width,
-
-    title,
-    borderType,
-    gapSize,
-    id,
-    type,
-    className,
-    style,
-    bg
-  } = props;
 
   const focusHandler = (id) => {
     let inputs = document.querySelectorAll(".Login-box-form-item");
@@ -106,12 +106,12 @@ const blurHandler = (id) => {
         {label}
       </label> */}
       <input
-        type="text"
+        type={type ? type : "text"}
         inputMode={inputMode}
        
         className={_.join(
           [
-            `flex-1 border border-gray-300 dark:bg-opacity-10  bg-transparent rounded-md outline-none py-3 px-4 text-tiny ${backgroundColor} ${align}`,
+            `flex-1  border border-gray-300 dark:bg-opacity-10  bg-transparent rounded-md outline-none py-3 px-4 text-tiny ${backgroundColor} ${align}`,
             inputStatusHandler(
               value,
               focusToggle,

src/view/addProduct/components/addPic.js

@@ -1,9 +1,11 @@
 import React, {useState, useEffect} from "react";
+import trashIcon from '../../../assets/img/trash.svg';
 
 const AddPic = () => {
     const [imageUrl, setImageUrl] = useState([]);
     const [selectedImage, setSelectedImage] = useState(null);
     const [fakeState, setFakeState] = useState(5);
+    const [deleteFirst, setDeleteFirst] = useState(false)
     
     useEffect(() => {
         if (selectedImage) {
@@ -21,8 +23,18 @@ const AddPic = () => {
             <div className="w-full px-4 flex items-center">
                 <div>
                 {
-                    imageUrl.length > 0 && <div className="w-32 h-32 rounded-xl  flex flex-col items-center">
+                    imageUrl.length > 0 && <div className="w-32 h-32 rounded-xl  flex flex-col items-center"
+                     onMouseOver={() => setDeleteFirst(true)}
+                     onMouseLeave={() => setDeleteFirst(false)}>
                         <img src={imageUrl[0]} className="h-full w-32 rounded-lg" />
+                        {
+                            deleteFirst && <div className="absolute w-32 z-10 h-32 rounded-lg 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, index) => index !== 0);
+                                            setImageUrl(newImageArray)
+                                        }}/>
+                                </div>
+                        }
                         {/* <p className="">تصویر شاخص</p> */}
                         </div>
                 }

src/view/addProduct/components/metrics.js

@@ -1,4 +1,5 @@
 import React, {useState, useEffect} from "react";
+import Input from "../../../components/input/signUpInput";
 
 const Metrics = () => {
    const inputs = [
@@ -17,7 +18,9 @@ const Metrics = () => {
                     inputs.map(
                         (item, index) => (
                             <div className="w-1/2 p-2">
-                                <input type="number" placeholder={item} className="bg-white border border-grayE0 h-14 w-full outline-none px-2 rounded-md" />
+                                {/* <input type="number" placeholder={item} className="bg-white border border-grayE0 h-14 w-full outline-none px-2 rounded-md" />7
+                                 */}
+                                 <Input type="number" title={item} className="w-full" id={index} align="w-full"/>
                             </div>    
                         )
                     )