create item barebones

src/components/widget/roomWidget.jsx

@@ -14,55 +14,87 @@ export default function RoomWidget({ roomlist }) {
           status={room.status}
         />
       ))}
-    </div>
+    </div> 
   );
 }
 
 function RoomCard({ number, status ,id}) {
   
   const { updateRoomStatus } = useHotel();
-  const [editing, setEditing] = useState(false);
+  const [editingAmount, setEditingAmount] = useState(false);
   const [value, SetValue] = useState(status);
 
   function submit() {
     updateRoomStatus(id,value);
-    setEditing(false);
+    setEditingAmount(false);
   }
 
   return (
       <div className="card">
-      <h3>Room {number}</h3>
-      <h4>Id {id}</h4>
+        <h3>Room {number}</h3>
+        <h4>Id {id}</h4>
 
-      {!editing ?(
-        <p onClick={() => setEditing(true)} style={{ cursor: "pointer" }}>
-          Status: {status}
-        </p>
-      ): (
-        <div>
-          <input
-          type="text"
-          value={value}
-          autoFocus
-          onChange={e => SetValue(e.target.value)}
-          onKeyDown={e => e.key === "Enter" && submit()}
-          />
+        {!editingAmount ?(
+          <p onClick={() => setEditingAmount(true)} style={{ cursor: "pointer" }}>
+            Status: {status}
+          </p>
+        ): (
+          <div>
+            <input
+            type="text"
+            value={value}
+            autoFocus
+            onChange={e => SetValue(e.target.value)}
+            onKeyDown={e => e.key === "Enter" && submit()}
+            />
+          </div>
+        )}
+
+
+        <div className="actions">
+          <button onClick={() => updateRoomStatus(id, "clean")}>
+            Mark Clean
+          </button>
+
+          <button onClick={() => updateRoomStatus(id, "dirty")}>
+            Mark Dirty
+          </button>
         </div>
-      )}
-
-
-      <div className="actions">
-        <button onClick={() => updateRoomStatus(id, "clean")}>
-          Mark Clean
-        </button>
-
-        <button onClick={() => updateRoomStatus(id, "dirty")}>
-          Mark Dirty
-        </button>
-      </div>
 
       </div>
   );
 }
 
+function CreateItemMenu() {
+  const [itemName, setItemName] = useState("");
+  const [itemAmount, setItemAmount] = useState(0);
+  const {createItem} = useHotel();
+
+
+  const handleSubmit = () => {
+    if (!itemName.trim() | !itemAmount.trim() ) return;
+
+    createItem(itemName, itemAmount);
+
+  }
+
+  return(
+    <div>
+      <input
+      type="text"
+      onChange={element => setItemName(element.target.value)}
+      placeholder="Nom de l'objet"
+      />
+      <input
+      type="text"
+      onChange={element => setItemAmount(element.target.value)}
+      placeholder="Montant d'objet(s)"
+      />
+      <button onClick={handleSubmit}>Creer</button>
+    </div>
+  )
+
+}
+
+
 //export default roomWidget