Refactor Header.tsx: import HostListing, remove unused imports, updat…

…e layout.
jitunayak · Aug 26, 2024 · a52aaa4 · a52aaa4
1 parent 76d8529
commit a52aaa4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git 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
@@ -18,21 +18,17 @@ 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',
           objectFit: 'cover',
         }}
         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%',
+});