From ab48fbe576e9c2eb2bd10f2c15c641173c93e1d6 Mon Sep 17 00:00:00 2001
From: DamyanBG <d.dimitrov.1988@abv.bg>
Date: Thu, 25 Apr 2024 18:57:31 +0300
Subject: [PATCH] create home details styling

---
 src/components/Homes/HomeDetails.jsx          | 120 +++++++++++++++---
 src/components/Homes/HomeDetails.scss         |   8 --
 src/components/Homes/HomeSuggestions.jsx      |   3 +
 src/components/Homes/home-details.module.scss |  72 +++++++++++
 4 files changed, 178 insertions(+), 25 deletions(-)
 delete mode 100644 src/components/Homes/HomeDetails.scss
 create mode 100644 src/components/Homes/home-details.module.scss

diff --git a/src/components/Homes/HomeDetails.jsx b/src/components/Homes/HomeDetails.jsx
index a84df37..e3c728a 100644
--- a/src/components/Homes/HomeDetails.jsx
+++ b/src/components/Homes/HomeDetails.jsx
@@ -1,21 +1,19 @@
-import './Homes.scss';
-import exampleHomePhoto from '../../images/home-main-photo-example.jpg';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useContext, useEffect, useState, lazy } from 'react';
-import './HomeDetails.scss';
+
 import { hostUrl } from '@/utils/urls';
-import { Link } from 'react-router-dom';
+import exampleHomePhoto from '../../images/home-main-photo-example.jpg';
 import VisitationsTable from '../..//common/VisitationsTable';
 import { UserContext } from '../../context/UserContext';
 import HomeSuggestions from './HomeSuggestions';
-import { useLocation  } from 'react-router-dom';
 
-const MapView = lazy(() => import('@/common/MapView'));
+import styles from "./home-details.module.scss"
+
+const MapView = lazy(() => import('../../common/MapView'));
 
 export default function HomeDetails() {
-    const location = useLocation();
-    const params = new URLSearchParams(location.search);
-    // const params = new URLSearchParams(window.location.search);
-    const homeId = params.get('homeId');
+    const searchParams = useSearchParams()[0]
+    const homeId = searchParams.get('homeId');
 
     const [homeDetails, setHomeDetails] = useState({});
     const [visitations, setVisitations] = useState([]);
@@ -33,9 +31,37 @@ export default function HomeDetails() {
     useEffect(fetchHomeDetails, [homeId]);
 
     return (
-        <section className="home-details">
-            <section className="home-details-container">
-                <div className="home-details-image-container">
+        <section className={styles.homeDetails}>
+            <section className={styles.topSection}>
+                <article className={styles.imagesContainer}>
+                    <article className='property-image-container'>
+                        <img
+                            src={homeDetails.photo_url}
+                            alt="Home"
+                            onError={(e) => {
+                                e.target.onError = null;
+                                e.target.src = exampleHomePhoto;
+                            }}
+                        />
+                    </article>
+                </article>
+
+                <article className={styles.mapAndButtons}>
+                    {homeDetails.latitude && homeDetails.longitude && (
+                        <MapView latitude={homeDetails.latitude} longitude={homeDetails.longitude} />
+                    )}
+                    <article>
+                        <button className={styles.contact}>CONTACT SELLER</button>
+                    </article>
+                    <article>
+                        <button className={styles.contact}>CHAT WITH SELLER</button>
+                    </article>
+                    <article>
+                        <button className={styles.favorites}>ADD TO FAVORITES</button>
+                    </article>
+                </article>
+
+                {/* <div className="home-details-image-container">
                     <img
                         src={homeDetails.photo_url}
                         alt="Home"
@@ -82,11 +108,71 @@ export default function HomeDetails() {
                             </Link>
                         </>
                     )}
-                </div>
+                </div> */}
+            </section>
+
+            <section className={styles.middleSection}>
+                <article className={styles.homeInfo}>
+                    <article>
+                        <h2>Overview</h2>
+                        <hr />
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td>City</td>
+                                    <td>{homeDetails.city}</td>
+                                </tr>
+                                <tr>
+                                    <td>Neighborhood</td>
+                                    <td>{homeDetails.neighborhood}</td>
+                                </tr>
+                                <tr>
+                                    <td>Address</td>
+                                    <td>{homeDetails.address}</td>
+                                </tr>
+                                <tr>
+                                    <td>Area</td>
+                                    <td>{homeDetails.area}</td>
+                                </tr>
+                                <tr>
+                                    <td>Price</td>
+                                    <td>{homeDetails.price}</td>
+                                </tr>
+                                <tr>
+                                    <td>Bedrooms</td>
+                                    <td>{homeDetails.bedrooms}</td>
+                                </tr>
+                                <tr>
+                                    <td>Bathrooms</td>
+                                    <td>{homeDetails.bathrooms}</td>
+                                </tr>
+                                <tr>
+                                    <td>Garages</td>
+                                    <td>{homeDetails.garages}</td>
+                                </tr>
+                                <tr>
+                                    <td>Year Build</td>
+                                    <td>{homeDetails.year}</td>
+                                </tr>
+                                <tr>
+                                    <td>Views</td>
+                                    <td>{homeDetails.home_views}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        
+                    </article>
+                    <article>
+                        <h2>Description</h2>
+                        <hr />
+                        <p>{homeDetails.description}</p>
+                    </article>
+                </article>
+                <article className={styles.share}>
+
+                </article>
             </section>
-            {homeDetails.latitude && homeDetails.longitude && (
-                <MapView latitude={homeDetails.latitude} longitude={homeDetails.longitude} />
-            )}
+            
             <HomeSuggestions homeId={homeId} />
         </section>
     );
diff --git a/src/components/Homes/HomeDetails.scss b/src/components/Homes/HomeDetails.scss
deleted file mode 100644
index 8c41982..0000000
--- a/src/components/Homes/HomeDetails.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.visitation-table-wrapper{
-    width: 100%;
-    margin-top: 10px;
-     
-    .visitation-table-header th {
-        text-align: start;
-    }
-}
diff --git a/src/components/Homes/HomeSuggestions.jsx b/src/components/Homes/HomeSuggestions.jsx
index b597222..b03fd86 100644
--- a/src/components/Homes/HomeSuggestions.jsx
+++ b/src/components/Homes/HomeSuggestions.jsx
@@ -21,6 +21,9 @@ const HomeSuggestions = ({ homeId }) => {
     return (
         suggestions.length > 0 && (
             <section className="suggestions">
+                <article className="latest-properties-title">
+                    <h2>Closest Properties</h2>
+                </article>
                 <section className="properties-card-container">
                     {suggestions.slice(0, 3).map((homeSug) => (
                         <HomeCard
diff --git a/src/components/Homes/home-details.module.scss b/src/components/Homes/home-details.module.scss
new file mode 100644
index 0000000..a181803
--- /dev/null
+++ b/src/components/Homes/home-details.module.scss
@@ -0,0 +1,72 @@
+@import "../../assets/_colors.scss";
+
+@mixin flex-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin-bottom: 36px;
+}
+
+.homeDetails {
+    padding: 48px 36px;
+}
+
+.topSection {
+   @include flex-section;
+}
+
+.imagesContainer {
+    width: 60%;
+
+    // img {
+    //     width: 100%;
+    // }
+}
+
+.mapAndButtons {
+    width: 40%;
+
+    article {
+        margin-left: 10%;
+        margin-right: 10%;
+
+        button {
+            width: 100%;
+            margin-bottom: 24px;
+            height: 48px;
+            border: none;
+            border-radius: 6px;
+        }
+
+        .contact {
+            background-color: $green-color;
+        }
+
+        .favorites {
+            background-color: $sand-color;
+        }
+    }
+}
+
+.middleSection {
+    @include flex-section;
+}
+
+.homeInfo {
+    width: 60%;
+
+    h2 {
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+
+    hr {
+        border: 1px solid $black-color;
+    }
+}
+
+.share {
+    width: 40%2;
+}
+