basic room display grid + buttons

src/components/widget/roomWidget.jsx

@@ -0,0 +1,68 @@
+
+import "./RoomWidget.css";
+import { useHotel } from "../HotelContext";
+import { useState } from "react";
+export default function RoomWidget({ roomlist }) {
+    
+  return (
+    <div className="grid">
+      {roomlist.map(room => (
+        <RoomCard
+          key={room.id}
+          id = {room.id}
+          number={room.number}
+          status={room.status}
+        />
+      ))}
+    </div>
+  );
+}
+
+function RoomCard({ number, status ,id}) {
+const { updateRoomStatus } = useHotel();
+const [editing, setEditing] = useState(false);
+const [value, SetValue] = useState(status);
+
+
+  function submit() {
+    updateRoomStatus(id,value);
+    setEditing(false);
+  }
+
+        return (
+            <div className="card">
+            <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()}
+                />
+              </div>
+            )}
+
+
+            <div className="actions">
+              <button onClick={() => updateRoomStatus(id, "clean")}>
+                Mark Clean
+              </button>
+
+              <button onClick={() => updateRoomStatus(id, "dirty")}>
+                Mark Dirty
+              </button>
+            </div>
+
+            </div>
+        );
+}
+
+//export default roomWidget