From a52aaa49a4669327027aee9f12b9457edd4c7559 Mon Sep 17 00:00:00 2001
From: jitunayak <jitunayak715@gmail.com>
Date: Mon, 26 Aug 2024 21:40:19 +0530
Subject: [PATCH] Refactor Header.tsx: import HostListing, remove unused
 imports, update layout.

---
 src/pages/Hosting/Header.tsx      |  4 ++--
 src/pages/Hosting/HostListing.tsx | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/pages/Hosting/Header.tsx b/src/pages/Hosting/Header.tsx
index d7ce54e..fa7c607 100644
--- a/src/pages/Hosting/Header.tsx
+++ b/src/pages/Hosting/Header.tsx
@@ -38,8 +38,8 @@ const HostingHeader: React.FC = () => {
       {roomQuery.isSuccess && (
         <div
           style={{
-            display: 'inline-flex',
-            overflowX: 'scroll',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
             width: '100%',
           }}
         >
diff --git a/src/pages/Hosting/HostListing.tsx b/src/pages/Hosting/HostListing.tsx
index d2da39b..e0fb405 100644
--- a/src/pages/Hosting/HostListing.tsx
+++ b/src/pages/Hosting/HostListing.tsx
@@ -18,11 +18,7 @@ const HostListing: React.FC<IProps> = ({ room }) => {
       onMouseEnter={() => setisHovered(true)}
       onMouseLeave={() => setisHovered(false)}
     >
-      <div
-        style={{ fontSize: '14px', fontWeight: '500', marginBottom: '1rem' }}
-      >
-        {room.name.substring(0, 20)}...
-      </div>
+      <Title>{room.name.substring(0, 20)}...</Title>
       <img
         style={{
           borderRadius: '4px',
@@ -30,9 +26,9 @@ const HostListing: React.FC<IProps> = ({ room }) => {
         }}
         height={300}
         src={room.images[0].url}
-        width={260}
+        width={'100%'}
       />
-      <span>₹ {room.price.discountedPrice}</span>
+      <span>₹{room.price.discountedPrice}</span>
 
       <AnimatePresence>
         {isHovered && (
@@ -101,3 +97,10 @@ const Card = styled('div', {
   padding: '$2',
   position: 'relative',
 });
+
+const Title = styled('div', {
+  fontSize: '$s',
+  fontWeight: '500',
+  marginBottom: '1rem',
+  width: '100%',
+});