Real-Estate-VN

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lama Real Estate UI</title>
+    <title>Real estate</title>
     <meta name="description" content="Buy, Sell and Rent Properties" />
     <link
       href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"

package.json

@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
+    "react-router-dom": "^6.26.1",
+    "sass": "^1.77.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",

src/App.jsx

@@ -1,7 +1,40 @@
+import HomePage from "./router/homePage/homePage";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import ListPage from "./router/listPage/listPage";
+import Layout from "./router/layout/layout";
+import SinglePage from "./router/singlePage/singlePage.jsx";
+import ProfilePage from "./router/profilePage/profilePage.jsx";
+
 function App() {
-  return (
-    <div>Hello World</div>
-  )
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <Layout />,
+      children: [
+        {
+          path: "/",
+          element: <HomePage />,
+        },
+        {
+          path: "/list",
+          element: <ListPage />,
+        },
+        {
+          path: "/list/:id",
+          element: <SinglePage />,
+        },
+        {
+          path: "/:id",
+          element: <SinglePage />,
+        },
+        {
+          path: "/profile",
+          element: <ProfilePage />,
+        },
+      ],
+    },
+  ]);
+  return <RouterProvider router={router} />;
 }
 
-export default App
+export default App;

src/components/card/card.jsx

@@ -0,0 +1,44 @@
+import { Link } from "react-router-dom";
+import "./card.scss";
+
+function Card({ item }) {
+  return (
+    <div className="card">
+      <Link to={`${item.id}`} className="imgContainer">
+        <img src={item.img} alt="img" />
+      </Link>
+      <div className="textContainer">
+        <h2 className="title">
+          <Link to={`${item.id}`}>{item.title}</Link>
+        </h2>
+        <p className="address">
+          <img src="/pin.png" alt="" />
+          <span>{item.address}</span>
+        </p>
+        <p className="price">${item.price}</p>
+        <div className="bottom">
+          <div className="features">
+            <div className="feature">
+              <img src="/bed.png" alt="bed" />
+              <span>{item.bedroom} bedroom</span>
+            </div>
+            <div className="feature">
+              <img src="/bath.png" alt="bath" />
+              <span>{item.bathroom} bathroom</span>
+            </div>
+          </div>
+          <div className="icons">
+            <div className="icon">
+              <img src="/save.png" alt="save" />
+            </div>
+            <div className="icon">
+              <img src="/chat.png" alt="save" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Card;

src/components/card/card.scss

@@ -0,0 +1,102 @@
+@import "../../responsive.scss";
+
+.card {
+  display: flex;
+  gap: 20px;
+
+  .imgContainer {
+    flex: 2;
+    height: 200px;
+
+    @include sm {
+      display: none;
+    }
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+  }
+
+  .textContainer {
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 10px;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+
+    .title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #444;
+      transition: all 0.4 ease;
+
+      &:hover {
+        color: #000;
+        scale: 1.01;
+      }
+    }
+
+    .address {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: #888;
+    }
+
+    .price {
+      font-size: 20px;
+      font-weight: 300px;
+      border-radius: 5px;
+      padding: 5px;
+      background-color: rgb(249, 245, 192);
+      max-width: max-content;
+    }
+
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      gap: 10px;
+
+      .features {
+        display: flex;
+        gap: 20px;
+        font-size: 14px;
+
+        .feature {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 5px;
+          background: whitesmoke;
+        }
+      }
+
+      .icons {
+        display: flex;
+        gap: 20px;
+
+        .icon {
+          display: flex;
+          align-items: center;
+          border: 1px solid #999;
+          border-radius: 5px;
+          padding: 2px 5px;
+          cursor: pointer;
+
+          &:hover {
+            background-color: lightgray;
+          }
+        }
+      }
+    }
+  }
+}

src/components/chat/Chat.jsx

@@ -0,0 +1,141 @@
+import { useState } from "react";
+import "./chat.scss";
+
+function Chat() {
+  const [chat, setChat] = useState(2);
+  return (
+    <div className="chat">
+      <div className="messages">
+        <h1>Messages</h1>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+        <div className="message">
+          <img
+            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt=""
+          />
+          <span>Ferret</span>
+          <p>How feel to day?</p>
+        </div>
+      </div>
+      {chat && (
+        <div className="chatBox">
+          <div className="top">
+            <div className="user">
+              <img
+                src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+                alt=""
+              />
+              Ferret
+            </div>
+            <span className="close" onClick={() => setChat(null)}>
+              X
+            </span>
+          </div>
+          <div className="center">
+            <div className="chatMessage">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage own">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage own">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage own">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+            <div className="chatMessage">
+              <p>Is it near school?</p>
+              <span>30 minute</span>
+            </div>
+          </div>
+          <div className="bottom">
+            <textarea></textarea>
+            <button>Send</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Chat;