ok

src/components/ItemConfig.js

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useRef } from "react";
+import styles from "./Modal.module.css";
+import { getImageUrl } from "../helpers/itemHelper.js";
+
+const ItemConfig = ({ Item, cancelEdit }) => {
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [previewUrl, setPreviewUrl] = useState(Item.image);
+    const fileInputRef = useRef(null);
+
+
+    useEffect(() => {
+        console.log(Item.image)
+
+        // Prevent scrolling when modal is open
+        document.body.style.overflow = "hidden";
+
+        if (selectedImage) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setPreviewUrl(reader.result);
+            };
+            reader.readAsDataURL(selectedImage);
+        } else {
+            setPreviewUrl(Item.image);
+        }
+    }, [selectedImage, Item]);
+
+
+    const handleOverlayClick = (event) => {
+        // Prevent scrolling when modal is open
+        document.body.style.overflow = "auto";
+        cancelEdit();
+    };
+
+
+    // Function to handle clicks on the modal content
+    const handleContentClick = (event) => {
+        // Prevent click event from propagating to the overlay
+        event.stopPropagation();
+    };
+
+
+    const handleChangeImage = () => {
+        fileInputRef.current.click();
+    };
+
+
+    const handleFileChange = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            setSelectedImage(file);
+        }
+    };
+
+    return (
+        <div onClick={handleOverlayClick} style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 200, backgroundColor: '#00000061' }}>
+            <div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '15px', height: '40%', backgroundColor: 'white', borderRadius: '20px 20px 0 0' }}>
+                <div style={{ display: 'flex' }}>
+                    <div style={{ width: '26vw', height: '26vw' }}>
+                        <img style={{ width: '100%', height: '100%', borderRadius: '10px', objectFit: 'cover' }} src={selectedImage ? previewUrl : getImageUrl(previewUrl)}></img>
+
+                        <input
+                            type="file"
+                            ref={fileInputRef}
+                            className={styles.fileInput}
+                            onChange={handleFileChange}
+                            accept="image/*"
+                            style={{ display: "none" }}
+                        />
+                    </div>
+                    <div style={{ width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                        <div onClick={() => handleChangeImage()} style={{ width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white' }}>
+                            Ganti gambar
+                        </div>
+                    </div>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', color: 'black' }}>
+                    <p>Nama item</p>
+                    <input value={Item.name}></input>
+                </div>
+                <div style={{ display: 'flex', color: 'black', justifyContent: 'space-between' }}>
+                    <div>
+                        <p>Harga</p>
+                        <input value={Item.price}></input>
+                    </div><div>
+                        <p>Harga promo</p>
+                        <input></input>
+                    </div>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', color: 'black' }}>
+                    <p>Deskripsi</p>
+                    <input value={Item.description}></input>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ItemConfig;

src/components/ItemLister.js

@@ -16,6 +16,7 @@ import {
 } from "../helpers/itemHelper.js";
 import ItemType from "./ItemType.js";
 import { createItemType } from "../helpers/itemHelper.js";
+import ItemConfig from "./ItemConfig.js"
 
 const ItemLister = ({
   index,
@@ -881,20 +882,7 @@ const ItemLister = ({
                           // >
                           //   batal
                           // </button>
-                          <div style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 200 }}>
-                            <div style={{ display: 'flex', flexDirection: 'column',padding: '15px', height: '40%', backgroundColor: '#bdbdbd', borderRadius: '20px 20px 0 0' }}>
-                              <div style={{display: 'flex'}}>
-                                <div style={{width: '26vw', height: '26vw'}}>
-                                  <img style={{width: '100%', height: '100%', borderRadius: '10px'}}src={getImageUrl(item.image)}></img>
-                                </div>
-                                <div style={{width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
-                                  <div style={{width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid black'}}>
-                                    Ganti gambar
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
+                          <ItemConfig Item={item} cancelEdit={()=>editItem(0)}/>
                         )}
                         <div className={styles["itemWrapper"]}>
                           {isEditMode && isEditItem != item.itemId && (