From 23a4816e5f61921a513cb591d11c7856ac1fd5e4 Mon Sep 17 00:00:00 2001
From: jefin <techy.jefinjoji@gmail.com>
Date: Wed, 3 Dec 2025 18:22:34 +0530
Subject: [PATCH] feat: add image display for room card (#57)

---
 src/components/Create.jsx                      |  2 +-
 src/components/RoomsSlider/RoomCard.jsx        |  7 +++++++
 src/components/RoomsSlider/RoomCard.module.css | 11 +++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/Create.jsx b/src/components/Create.jsx
index ac11fe5..6f72118 100644
--- a/src/components/Create.jsx
+++ b/src/components/Create.jsx
@@ -137,7 +137,7 @@ const CreateRoom = () => {
         room_code: Number(formData.roomCode), 
         name: formData.roomName,
         description: formData.description,
-        img_url: finalImgUrl,
+        image_url: finalImgUrl,
         cost: Number(formData.cost),     
         end_date: formData.endDate
       };
diff --git a/src/components/RoomsSlider/RoomCard.jsx b/src/components/RoomsSlider/RoomCard.jsx
index 2c0d4f6..f21b0e3 100644
--- a/src/components/RoomsSlider/RoomCard.jsx
+++ b/src/components/RoomsSlider/RoomCard.jsx
@@ -91,6 +91,13 @@ const RoomCard = ({ room }) => {
   return (
     <div className={styles.card} role="region" aria-label="Room preview">
       <div className={styles.hero}>
+        {room.img && (
+          <img
+            src={room.img}
+            alt={room.name}
+            className={styles.heroImage}
+          />
+        )}
         <div className={styles["time-box"]}>{timeDisplay}</div>
       </div>
 
diff --git a/src/components/RoomsSlider/RoomCard.module.css b/src/components/RoomsSlider/RoomCard.module.css
index 825c527..3ccf317 100644
--- a/src/components/RoomsSlider/RoomCard.module.css
+++ b/src/components/RoomsSlider/RoomCard.module.css
@@ -27,11 +27,22 @@
   justify-content: flex-start;
 }
 
+.heroImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: 1;
+}
+
 /* Countdown bubble */
 .time-box {
   position: absolute;
   top: 14px;
   right: 14px;
+  z-index: 2;
   padding: 8px 14px;
   background: rgba(255,255,255,0.9);
   backdrop-filter: blur(10px);