React Real Estate App UI Design Tutorial for Beginners

Learning From Youtube Channel: Lama Dev
Video: React React Estate App UI Design Tutorial for Beginners
Thank you.

00:00:00 – Introduction
00:02:17 – Installation
00:08:17 – Responsive Layout with CSS
00:15:36 – React Responsive Navbar Design
00:24:26 – React Responsive Hamburger Menu Design
00:33:09 – Real Estate App Homepage Design
00:34:28 – React.js VSCode Snippets
00:36:00 – React Responsive Hero Section Design
00:44:27 – Search Bar Design with React & CSS
01:03:49 – React Router Dom Tutorial 2024
01:07:08 – React Router Dom Outlet Tutorial
01:12:25 – React Responsive List Page Design
01:39:30 – React Map Tutorial (Open Source Map Library)
01:40:41 – React Leaflet Map Tutorial
01:48:17 – React.js Responsive Single Page Design
01:58:23 – React.js Image Slider Tutorial From Scratch
02:12:41 – Property Features Design
02:30:00 – React.js Responsive Profile Page Design
02:45:03 – React.js Chat Component Design
02:50:17 – React Messenger Chat Window Design
03:00:55 – What’s Next?
03:01:25 – Outro

Introduction

Installation

建立 estateui 資料夾
Source Code
可以使用 git clone 下載開始專案
git clone –single-branch -b starter web URL
建議別依賴單一技術，因為在工作上會被要求不同的技術
安裝 sass 套件 – npm i sass
在 src 資料夾裡面建立 index.scss 檔案
修改 main.jsx 檔案
修改 index.scss 檔案
修改 App.jsx 檔案
提到需要知道 CSS 相關知識

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.scss'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

// index.scss
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font-family: 'Lato', sans-serif;
  overflow: hidden;
}

// App.jsx
function App() {
  return (
    <div><a href="/">Hello</a></div>
  )
}

export default App

Responsive Layout with CSS

修改 App.jsx 檔案
在 src 資料夾裡面建立 layout.scss 檔案
在 src 資料夾裡面建立 responsive.scss 檔案

// App.jsx
import "./layout.scss"

function App() {
  return (
    <div className="layout">
      Hello
    </div>
  )
}

export default App

// layout.scss
@import "./responsive.scss";

.layout {
  height: 100vh;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;

  @include lg{
    background-color: rgb(247, 210, 196);
    max-width: 1280px;
  }

  @include md{
    background-color: rgb(186, 203, 234);
    max-width: 768px;
  }

  @include sm{
    background-color: rgb(239, 200, 200);
    max-width: 640px;
  }
}

// responsive.scss
@mixin sm {
  @media(max-width: 738px) {
    @content;
  }
}

@mixin md {
  @media(max-width: 1024px) {
    @content;
  }
}

@mixin lg {
  @media(max-width: 1366px) {
    @content;
  }
}

React Responsive Navbar Design

在 src 資料夾裡面建立 components 資料夾
在 components 資料夾裡面建立 Navbar.jsx 檔案
修改 App.jsx 檔案
在 components 資料夾裡面建立 navbar.scss 檔案
在 components 資料夾裡面建立 navbar 資料夾
把 Navbar.jsx、navbar.scss 檔案移動到 navbar 資料夾裡面
修改 App.jsx 檔案 Navbar 匯入路徑
修改 Navbar.jsx 檔案
修改 navbar.scss 檔案

// Navbar.jsx
import "./navbar.scss"

function Navbar() {
  return (
    <nav>
      <div className="left">
        <a href="/" className="logo">
          <img src="/logo.png" />
          <span>LamaEstate</span>
        </a>
        <a href="/">Home</a>
        <a href="/">About</a>
        <a href="/">Contact</a>
        <a href="/">Agents</a>
      </div>
      <div className="right">
        <a href="/">Sign in</a>
        <a href="/" className="register">Sign up</a>
      </div>
    </nav>
  )
}

export default Navbar;

// App.jsx
import Navbar from './components/navbar/Navbar'
import "./layout.scss"

function App() {
  return (
    <div className="layout">
      <Navbar />
    </div>
  )
}

export default App

// navbar.scss
nav {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  a {
    transition: all 0.4s ease;

    &:hover {
      scale: 1.05;
    }
  }

  .left{
    flex: 3;
    display: flex;
    align-items: center;
    gap: 50px;

    .logo {
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;
      gap: 10px;

      img {
        width: 28px;
      }
    }
  }
  .right{
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #fcf5f3;
    height: 100%;

    a {
      padding: 12px 24px;
      margin: 20px;
    }

    .register {
      background-color: #fece51;
    }
  }
}

React Responsive Hamburger Menu Design

修改 navbar.scss 檔案
修改 Navbar.jsx 檔案

// navbar.scss
@import "../../responsive.scss";

nav {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  a {
    transition: all 0.4s ease;

    @include sm {
      display: none;
    }

    &:hover {
      scale: 1.05;
    }
  }

  .left{
    flex: 3;
    display: flex;
    align-items: center;
    gap: 50px;

    .logo {
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;
      gap: 10px;

      img {
        width: 28px;
      }

      span {
        @include md {
          display: none;
        }

        @include sm {
          display: initial;
        }
      }
    }
  }
  .right{
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #fcf5f3;
    height: 100%;

    @include md {
      background-color: transparent;
    }

    a {
      padding: 12px 24px;
      margin: 20px;
    }

    .register {
      background-color: #fece51;
    }

    .menuIcon {
      display: none;
      z-index: 999;

      img {
        width: 36px;
        height: 36px;
        cursor: pointer;
      }

      @include sm {
        display: inline;
      }
    }

    .menu {
      position: absolute;
      top: 0;
      right: -50%;
      background-color: black;
      color: white;
      height: 100vh;
      width: 50%;
      transition: all 1s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24px;

      &.active {
        right: 0;
      }

      @include sm {
        a {
          display: initial;
        }
      }
    }
  }
}

// Navbar.jsx
import { useState } from "react";
import "./navbar.scss"

function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav>
      <div className="left">
        <a href="/" className="logo">
          <img src="/logo.png" />
          <span>LamaEstate</span>
        </a>
        <a href="/">Home</a>
        <a href="/">About</a>
        <a href="/">Contact</a>
        <a href="/">Agents</a>
      </div>
      <div className="right">
        <a href="/">Sign in</a>
        <a href="/" className="register">Sign up</a>
        <div className="menuIcon">
          <img src="/menu.png" alt="" onClick={() => setOpen((prev) => !prev)} />
        </div>
        <div className={open ? "menu active" : "menu"}>
          <a href="/">Home</a>
          <a href="/">About</a>
          <a href="/">Contact</a>
          <a href="/">Agents</a>
          <a href="/">Sign in</a>
          <a href="/">Sign up</a>
        </div>
      </div>
    </nav>
  )
}

export default Navbar;

Real Estate App Homepage Design

在 src 資料夾裡面建立 pages 資料夾或者 routes 資料夾
這裡選擇建立 routes 資料夾
在 routes 資料夾裡面建立 homePage 資料夾
在 homePage 資料夾裡面建立 homePage.jsx 檔案
在 homePage 資料夾裡面建立 homePage.scss 檔案

React.js VSCode Snippets

使用 fcs 片段快速建立程式碼
修改 homePage.jsx 檔案
介紹如何自訂片段程式碼設定 – Snippets
修改 javascriptreact.json 檔案
Snippets: Configure User Snippets > javascriptreact.json
修改 App.jsx 檔案

// javascriptreact.json
{
    "fcs": {
        "prefix": "fcs",
        "body": [
            "import './${TM_FILENAME_BASE/^(.)/${1:/downcase}/}.scss'"
            ""
            "function ${1:${TM_FILENAME_BASE/(.)(.*)/${1:/capitalize}${2}/}}(){",
            "  return (",
            "    <div className='${TM_FILENAME_BASE/^(.)/${1:/downcase}/}'>${1:${TM_FILENAME_BASE/(.)(.*)/${1:/capitalize}${2}/}}</div>",
            "  )",
            "}",
            "",
            "export default ${1:${TM_FILENAME_BASE/(.)(.*)/${1:/capitalize}${2}/}}"
        ],
        "description": "Create a functional component with Sass"
    },
    "acs": {
	"prefix": "acs",
	"body": [
            "import './${TM_FILENAME_BASE/^(.)/${1:/downcase}/}.scss'"
            ""
            "const ${1:${TM_FILENAME_BASE/(.)(.*)/${1:/capitalize}${2}/}} = () => {",
            "  return (",
            "    <div className='${TM_FILENAME_BASE/^(.)/${1:/downcase}/}'>${1:${TM_FILENAME_BASE/(.)(.*)/${1:/capitalize}${2}/}}</div>",
            "  )",
            "}",
            "",
            "export default ${1:${TM_FILENAME_BASE/(.)(.*)/${1:/capitalize}${2}/}}" 
	],
	"description": "Create an arrow component with Sass"
    }
}

// homePage.jsx
import './homePage.scss'

function HomePage(){
  return (
    <div className='homePage'>HomePage</div>
  )
}

export default HomePage

React Responsive Hero Section Design

修改 App.jsx 檔案
修改 layout.scss 檔案
.content CSS 畫面高度滿版的方法有二
– 使用 height: calc(100vh – 100px);
– 使用 flex 方法 (這裡選擇這個方法)
修改 homePage.jsx 檔案
修改 homePage.scss 檔案
在 components 資料夾裡面建立 searchBar 資料夾
在 searchBar 資料夾裡面建立 SearchBar.jsx 檔案
使用 fcs 片段快速建立程式碼
修改 SearchBar.jsx 檔案
在 searchBar 資料夾裡面建立 searchBar.scss 檔案
修改 searchBar.scss 檔案
修改 homePage.jsx 檔案，加入 <SearchBar />、匯入 SearchBar，增加 .boxes 內容
修改 homePage.scss 檔案

// App.jsx
import Navbar from './components/navbar/Navbar'
import "./layout.scss"
import HomePage from './routes/homePage/homePage'

function App() {
  return (
    <div className="layout">
      <div className="navbar">
        <Navbar />
      </div>
      <div className="content">
        <HomePage />
      </div>
    </div>
  )
}

export default App

// layout.scss
@import "./responsive.scss";

.layout {
  height: 100vh;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;

  @include lg{
    background-color: rgb(247, 210, 196);
    max-width: 1280px;
  }

  @include md{
    background-color: rgb(186, 203, 234);
    max-width: 768px;
  }

  @include sm{
    background-color: rgb(239, 200, 200);
    max-width: 640px;
  }

  .content {
    flex: 1;
  }
}

// homePage.jsx
import SearchBar from "../../components/searchBar/SearchBar";
import './homePage.scss';

function HomePage(){
  return (
    <div className='homePage'>
      <div className="textContainer">
        <div className="wrapper">
          <h1 className='title'>Find Real Estate & Get Your Dream Place</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos
            explicabo suscipit cum eius, iure est nulla animi consequatur
            facilis id pariatur fugit quos laudantium temporibus dolor ea
            repellat provident impedit!
          </p>
          <SearchBar />
          <div className="boxes">
            <div className="box">
              <h1>16+</h1>
              <h2>Years of Experience</h2>
            </div>
            <div className="box">
              <h1>200</h1>
              <h2>Award Gained</h2>
            </div>
            <div className="box">
              <h1>1200+</h1>
              <h2>Property Ready</h2>
            </div>
          </div>
        </div>
      </div>
      <div className="imgContainer">
        <img src="/bg.png" alt="" />
      </div>
    </div>
  )
}

export default HomePage

// homePage.scss
.homePage {
  display: flex;
  height: 100%;

  .textContainer {
    flex: 3;

    .wrapper {
      padding-right: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 50px;
      height: 100%;

      .title {
        font-size: 64px;
      }

      .boxes {
        display: flex;
        justify-content: space-between;

        h1 {
          font-size: 36px;
        }

        h2 {
          font-size: 20px;
          font-weight: 300;
        }
      }
    }
  }

  .imgContainer {
    flex: 2;
    background-color: #fcf5f3;
    position: relative;
    display: flex;
    align-items: center;

    img {
      width: 115%;
      position: absolute;
      right: 0;
    }
  }
}

// SearchBar.jsx
import './searchBar.scss'

function SearchBar(){
  return (
    <div className='searchBar'>SearchBar</div>
  )
}

export default SearchBar

// searchBar.scss
.searchBar {
  
}

Search Bar Design with React & CSS

修改 SearchBar.jsx 檔案
修改 searchBar.scss 檔案
修改 homePage.scss 檔案
修改 layout.scss 檔案

// SearchBar.jsx
import { useState } from 'react'
import './searchBar.scss'

const types = ["buy", "rent"];

function SearchBar(){
  const [query, setQuery] = useState({
    type: "buy",
    location: "",
    minPrice: 0,
    maxPrice: 0,
  });

  const switchType = (val) => {
    setQuery(prev => ({ ...prev, type: val }));
  };


  return (
    <div className='searchBar'>
      <div className="type">
        {types.map((type) => (
          <button key={type} onClick={() => switchType(type)} className={query.type === type ? "active" : ""}>
            {type}
          </button>
        ))}
      </div>
      <form>
        <input type="text" name='location' placeholder='City Location' />
        <input
          type="number"
          name='minPrice'
          min={0}
          max={10000000}
          placeholder='Min Price'
        />
        <input
          type="number"
          name='maxPrice'
          min={0}
          max={10000000}
          placeholder='Max Price'
        />
        <button>
          <img src="/search.png" alt="" />
        </button>
      </form>
    </div>
  )
}

export default SearchBar

// searchBar.scss
@import "../../responsive.scss";

.searchBar {
  .type {


    button {
      padding: 16px 36px;
      border: 1px solid #999;
      border-bottom: none;
      cursor: pointer;
      background-color: white;
      text-transform: capitalize;

      &.active {
        background-color: black;
        color: white;
      }

      &:first-child {
        border-top-left-radius: 5px;
        border-right: none;
      }

      &:last-child {
        border-top-right-radius: 5px;
        border-left: none;
      }
    }
  }

  form {
    border: 1px solid #999;
    display: flex;
    justify-content: space-between;
    height: 64px;
    gap: 5px;

    @include sm {
      flex-direction: column;
      border: none;
    }

    input {
      border: none;
      padding: 0px 10px;
      width: 200px;

      @include lg {
        padding: 0px 5px;

        &:nth-child(2), &:nth-child(3) {
          width: 140px;
        }
      }

      @include md {
        width: 200px;
        &:nth-child(2),
        &:nth-child(3) {
          width: 200px;
        }
      }

      @include sm {
        width: auto;
        &:nth-child(2),
        &:nth-child(3) {
          width: auto;
        }
        padding: 20px;
        border: 1px solid #999;
      }
    }

    button {
      border: none;
      cursor: pointer;
      background-color: #fece51;
      flex: 1;

      @include sm {
        padding: 10px;
      }

      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}

// homePage.scss
@import "../../responsive.scss";

.homePage {
  display: flex;
  height: 100%;

  .textContainer {
    flex: 3;

    .wrapper {
      padding-right: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 50px;
      height: 100%;

      @include md {
        padding: 0;
      }

      @include sm {
        justify-content: flex-start;
      }

      .title {
        font-size: 64px;

        @include lg {
          font-size: 48px;
        }
      }

      .boxes {
        display: flex;
        justify-content: space-between;

        @include sm {
          display: none;
        }

        h1 {
          font-size: 36px;

          @include lg {
            font-size: 32px;
          }
        }

        h2 {
          font-size: 20px;
          font-weight: 300;
        }
      }
    }
  }

  .imgContainer {
    flex: 2;
    background-color: #fcf5f3;
    position: relative;
    display: flex;
    align-items: center;

    @include md {
      display: none;
    }

    img {
      width: 115%;
      position: absolute;
      right: 0;

      @include lg {
        width: 105%;
      }
    }
  }
}

// src/layout.scss
@import "./responsive.scss";

.layout {
  height: 100vh;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;

  @include lg{
    // background-color: rgb(247, 210, 196);
    max-width: 1280px;
  }

  @include md{
    // background-color: rgb(186, 203, 234);
    max-width: 768px;
  }

  @include sm{
    // background-color: rgb(239, 200, 200);
    max-width: 640px;
  }

  .content {
    flex: 1;
  }
}

React Router Dom Tutorial 2024

在 routes 資料夾裡面建立 listPage 資料夾
在 listPage 資料夾裡面建立 listPage.jsx 檔案
修改 listPage.jsx 檔案，使用程式碼片段 fcs 快速建立
在 listPage 資料夾裡面建立 listPage.scss 檔案
修改 listPage.scss 檔案
講解使用 React Router
安裝 React Router 套件 – npm i react-router-dom
修改 App.jsx 檔案

// src/routes/listPage/listPage.jsx
import './listPage.scss'

function ListPage(){
  return (
    <div className='listPage'>ListPage</div>
  )
}

export default ListPage

// src/routes/listPage/listPage.scss
.listPage {

}

// src/App.jsx
import Navbar from './components/navbar/Navbar'
import "./layout.scss"
import HomePage from './routes/homePage/homePage'
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from 'react-router-dom'
import ListPage from './routes/listPage/listPage'

function App() {

  const router = createBrowserRouter([
    {
      path: "/",
      element: <HomePage />
    },
    {
      path: "/list",
      element: <ListPage />
    },
  ]);

  return (
    // <div className="layout">
    //   <div className="navbar">
    //     <Navbar />
    //   </div>
    //   <div className="content">
    //     <HomePage />
    //   </div>
    // </div>
    <RouterProvider router={router} />
  )
}

export default App

React Router Dom Outlet Tutorial

修改 App.jsx 檔案
在 routes 資料夾裡面建立 layout 資料夾
在 layout 資料夾裡面建立 layout.jsx 檔案
在 layout 資料夾裡面建立 layout.scss 檔案
修改 layout.scss 檔案
修改 layout.jsx 檔案，使用程式碼片段 fcs 快速建立程式碼
修改 App.jsx 檔案
修改 layout.jsx 檔案
到根目錄 layout.scss 檔案複製程式碼
修改 layout.scss 檔案，貼上程式碼
刪除根目錄 layout.scss 檔案
修改 App.jsx 檔案
在 routes 資料夾裡面建立 singlePage 資料夾
在 singlePage 資料夾裡面建立 singlePage.jsx 檔案
修改 singlePage.jsx 檔案，使用程式碼片段 fcs 快速建立
在 singlePage 資料夾裡面建立 singlePage.scss 檔案
在 routes 資料夾裡面建立 login 資料夾
在 login 資料夾裡面建立 login.jsx 檔案
在 login 資料夾裡面建立 login.scss 檔案
修改 login.jsx 檔案，使用程式碼片段 fcs 快速建立
修改 App.jsx 檔案

// src/App.jsx
import HomePage from './routes/homePage/homePage'
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom'
import ListPage from './routes/listPage/listPage'
import Layout from './routes/layout/layout'
import SinglePage from './routes/singlePage/singlePage'

function App() {

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Layout />,
      children: [
        {
          path: "/",
          element: <HomePage />
        },
        {
          path: "/list",
          element: <ListPage />
        },
        {
          path: "/:id",
          element: <SinglePage />
        },
      ]
    },
  ]);

  return (
    <RouterProvider router={router} />
  )
}

export default App

// src/routes/layout/layout.jsx
import './layout.scss'
import Navbar from '../../components/navbar/Navbar'
import { Outlet } from 'react-router-dom'

function Layout(){
  return (
    <div className="layout">
      <div className="navbar">
        <Navbar />
      </div>
      <div className="content">
        <Outlet />
      </div>
    </div>
  )
}

export default Layout

// src/routes/layout/layout.scss
@import "../../responsive.scss";

.layout {
  height: 100vh;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;

  @include lg{
    // background-color: rgb(247, 210, 196);
    max-width: 1280px;
  }

  @include md{
    // background-color: rgb(186, 203, 234);
    max-width: 768px;
  }

  @include sm{
    // background-color: rgb(239, 200, 200);
    max-width: 640px;
  }

  .content {
    flex: 1;
  }
}

// src/routes/singlePage/singlePage.jsx
import './singlePage.scss'

function SinglePage(){
  return (
    <div className='singlePage'>SinglePage</div>
  )
}

export default SinglePage

// src/routes/singlePage/singlePage.scss
.singlePage {

}

// src/routes/login/login.jsx
import './login.scss'

function Login(){
  return (
    <div className='login'>Login</div>
  )
}

export default Login

// src/routes/login/login.scss
.login {

}

React Responsive List Page Design

修改 listPage.jsx 檔案
修改 listPage.scss 檔案
在 src 資料夾裡面建立 lib 資料夾
在 lib 資料夾裡面建立 dummydata.js 檔案
修改 dummydata.js 檔案，複製程式碼貼上
修改 listPage.jsx 檔案
修改 listPage.scss 檔案
修改 listPage.jsx 檔案
修改 listPage.scss 檔案
在 components 資料夾裡面建立 filter 資料夾
在 filter 資料夾裡面建立 Filter.jsx 檔案
在 filter 資料夾裡面建立 filter.scss 檔案
修改 Filter.jsx 檔案，使用程式碼片段 fcs 快速建立
修改 filter.scss 檔案
修改 listPage.jsx 檔案
在 components 資料夾裡面建立 card 資料夾
在 card 資料夾裡面建立 Card.jsx 檔案
在 card 資料夾裡面建立 card.scss 檔案
修改 listPage.jsx 檔案
修改 Filter.jsx 檔案
修改 filter.scss 檔案
修改 listPage.scss 檔案
修改 Card.jsx 檔案
修改 Navbar.jsx 檔案
Change the <a> tags in your Navbar component as well
修改 Card.jsx 檔案
修改 searchBar.scss 檔案，關於 scss 除錯
修改 Card.jsx 檔案
修改 card.scss 檔案
修改 Card.jsx 檔案
修改 dummydata.js 檔案
修改 card.scss 檔案
修改 listPage.scss 檔案
修改 layout.scss 檔案
修改 listPage.scss 檔案

// src/routes/listPage/listPage.jsx
import { listData } from '../../lib/dummydata'
import './listPage.scss'
import Filter from '../../components/filter/Filter'
import Card from '../../components/card/Card'

function ListPage(){
  const data = listData;
  
  return (
    <div className='listPage'>
      <div className="listContainer">
        <div className="wrapper">
          <Filter />
          { data.map(item => (
            <Card key={item.id} item={item} />
          ))}
        </div>
      </div>
      <div className="mapContainer">Map</div>
    </div>
  )
}

export default ListPage

// src/routes/listPage/listPage.scss
.listPage {
  display: flex;
  height: 100%;

  .listContainer {
    flex: 3;
    height: 100%;

    .wrapper {
      height: 100%;
      padding-right: 50px;
      display: flex;
      flex-direction: column;
      gap: 50px;
      overflow-y: scroll;
      padding-bottom: 50px;
    }
  }
  .mapContainer { flex: 2; background-color: #fcf5f3; }
}

// src/lib/dummydata.js
export const listData = [
  {
    id: 1,
    title: "A Great Apartment Next to the Beach!",
    img: "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 2,
    bathroom: 1,
    price: 1000,
    address: "456 Park Avenue, London",
    latitude: 51.5074,
    longitude: -0.1278,
  },
  {
    id: 2,
    title: "An Awesome Apartment Near the Park! Almost too good to be true!",
    img: "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 3,
    bathroom: 2,
    price: 1500,
    address: "789 Oxford Street, London",
    latitude: 52.4862,
    longitude: -1.8904,
  },
  {
    id: 3,
    title: "A New Apartment in the City!",
    img: "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 1,
    bathroom: 1,
    price: 800,
    address: "101 Baker Street, London",
    latitude: 53.4808,
    longitude: -2.2426,
  },
  {
    id: 4,
    title: "Great Location! Great Price! Great Apartment!",
    img: "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 2,
    bathroom: 1,
    price: 1000,
    address: "234 Kingsway, London,",
    latitude: 53.8008,
    longitude: -1.5491,
  },
  {
    id: 5,
    title: "Apartment 5",
    img: "https://images.pexels.com/photos/276625/pexels-photo-276625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 3,
    bathroom: 2,
    price: 1500,
    address: "567 Victoria Road, London",
    latitude: 53.4084,
    longitude: -2.9916,
  },
  {
    id: 6,
    title: "Apartment 6",
    img: "https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 1,
    bathroom: 1,
    price: 800,
    address: "890 Regent Street, London",
    latitude: 54.9783,
    longitude: -1.6174,
  },
  {
    id: 7,
    title: "Apartment 7",
    img: "https://images.pexels.com/photos/2029667/pexels-photo-2029667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 2,
    bathroom: 1,
    price: 1000,
    address: "112 Piccadilly, London",
    latitude: 53.3811,
    longitude: -1.4701,
  },
  {
    id: 8,
    title: "Apartment 8",
    img: "https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 3,
    bathroom: 2,
    price: 1500,
    address: "8765 Main High Street, London",
    latitude: 51.4545,
    longitude: -2.5879,
  },
];

export const singlePostData = {
  id: 1,
  title: "Beautiful Apartment",
  price: 1200,
  images: [
    "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  ],
  bedRooms: 2,
  bathroom: 1,
  size: 861,
  latitude: 51.5074,
  longitude: -0.1278,
  city: "London",
  address: "1234 Broadway St",
  school: "250m away",
  bus: "100m away",
  restaurant: "50m away",
  description:
    "Future alike hill pull picture swim magic chain seed engineer nest outer raise bound easy poetry gain loud weigh me recognize farmer bare danger. actually put square leg vessels earth engine matter key cup indeed body film century shut place environment were stage vertical roof bottom lady function breeze darkness beside tin view local breathe carbon swam declared magnet escape has from pile apart route coffee storm someone hold space use ahead sheep jungle closely natural attached part top grain your grade trade corn salmon trouble new bend most teacher range anybody every seat fifteen eventually",
};

export const userData = {
  id: 1,
  name: "John Doe",
  img: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
};

// src/components/filter/Filter.jsx
import './filter.scss'

function Filter(){
  return (
    <div className='filter'>
      <h1>Search results for <b>London</b></h1>
      <div className="top">
        <div className="item">
          <label htmlFor="city">Location</label>
          <input type="text" id='city' name='city' placeholder='City Location' />
        </div>
      </div>
      <div className="bottom">
      <div className="item">
        <label htmlFor="type">Type</label>
        <select name="type" id="type">
          <option value="">any</option>
          <option value="buy">Buy</option>
          <option value="rent">Rent</option>
        </select>
      </div>
      <div className="item">
        <label htmlFor="property">Property</label>
        <select name="property" id="property">
          <option value="">any</option>
          <option value="apartment">Apartment</option>
          <option value="house">House</option>
          <option value="condo">Condo</option>
          <option value="land">Land</option>
        </select>
      </div>
      <div className="item">
        <label htmlFor="minPrice">Min Price</label>
        <input type="number" id='minPrice' name='minPrice' placeholder='any' />
      </div>
      <div className="item">
        <label htmlFor="maxPrice">Max Price</label>
        <input type="number" id='maxPrice' name='maxPrice' placeholder='any' />
      </div>
      <div className="item">
        <label htmlFor="bedroom">Bedroom</label>
        <input type="text" id='bedroom' name='bedroom' placeholder='any' />
      </div>
      <button>
        <img src="/search.png" alt="" />
      </button>

      </div>
    </div>
  )
}

export default Filter

// src/components/filter/filter.scss
.filter {
  display: flex;
  flex-direction: column;
  gap: 10px;

  h1 {
    font-weight: 300;
    font-size: 24px;
  }

  .item {
    display: flex;
    flex-direction: column;
    gap: 2px;

    label {
      font-size: 10px;
    }

    input,
    select {
      width: 100px;
      padding: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      font-size: 14px;
    }
  }

  .top {
    input {
      width: 100%;
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    button {
      width: 100px;
      padding: 10px;
      border: none;
      cursor: pointer;
      background-color: #fece51;

      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}

// src/components/card/Card.jsx
import { Link } from 'react-router-dom'
import './card.scss'

function Card({ item }){
  return (
    <div className='card'>
      <Link to={`/${item.id}`} className="imageContainer">
        <img src={item.img} alt="" />
      </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="" />
              <span>{item.bedroom} bedroom</span>
            </div>
            <div className="feature">
              <img src="/bath.png" alt="" />
              <span>{item.bathroom} bathroom</span>
            </div>
          </div>
          <div className="icons">
            <div className="icon">
              <img src="/save.png" alt="" />
            </div>
            <div className="icon">
              <img src="/chat.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Card

// src/components/card/card.scss
.card {
  display: flex;
  gap: 20px;

  .imageContainer {
    flex: 2;
    height: 200px;

    img {
      width: 100%;
      height: 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.4s 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: 300;
      padding: 5px;
      border-radius: 5px;
      background-color: rgba(254, 205, 81, 0.438);
      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;
          background-color: whitesmoke;
          padding: 5px;
          border-radius: 5px;
        }
      }

      .icons {
        display: flex;
        gap: 20px;

        .icon {
          border: 1px solid #999;
          padding: 2px 5px;
          border-radius: 5px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background-color: lightgray;
          }
        }
      }
    }
  }
}

// src/components/navbar/Navbar.jsx
import { Link } from "react-router-dom"
import { useState } from "react"
import "./navbar.scss"

function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav>
      <div className="left">
        <Link to="/" className="logo">
          <img src="/logo.png" />
          <span>LamaEstate</span>
        </Link>
        <Link to="/">Home</Link>
        <Link to="/">About</Link>
        <Link to="/">Contact</Link>
        <Link to="/">Agents</Link>
      </div>
      <div className="right">
        <Link to="/">Sign in</Link>
        <Link to="/" className="register">Sign up</Link>
        <div className="menuIcon">
          <img src="/menu.png" alt="" onClick={() => setOpen((prev) => !prev)} />
        </div>
        <div className={open ? "menu active" : "menu"}>
          <Link to="/">Home</Link>
          <Link to="/">About</Link>
          <Link to="/">Contact</Link>
          <Link to="/">Agents</Link>
          <Link to="/">Sign in</Link>
          <Link to="/">Sign up</Link>
        </div>
      </div>
    </nav>
  )
}

export default Navbar;

// src/components/searchBar/searchBar.scss
@import "../../responsive.scss";

.searchBar {
  .type {


    button {
      padding: 16px 36px;
      border: 1px solid #999;
      border-bottom: none;
      cursor: pointer;
      background-color: white;
      text-transform: capitalize;

      &.active {
        background-color: black;
        color: white;
      }

      &:first-child {
        border-top-left-radius: 5px;
        border-right: none;
      }

      &:last-child {
        border-top-right-radius: 5px;
        border-left: none;
      }
    }
  }

  form {
    border: 1px solid #999;
    display: flex;
    justify-content: space-between;
    height: 64px;
    gap: 5px;

    @include sm {
      flex-direction: column;
      border: none;
    }

    input {
      border: none;
      padding: 0px 10px;
      width: 200px;

      @include lg {
        padding: 0px 5px;

        &:nth-child(2), &:nth-child(3) {
          width: 140px;
        }
      }

      @include md {
        width: 200px;
        &:nth-child(2),
        &:nth-child(3) {
          width: 200px;
        }
      }

      @include sm {
        width: auto;
        &:nth-child(2),
        &:nth-child(3) {
          width: auto;
        }

        & {
          padding: 20px;
          border: 1px solid #999;
        }
      }
    }

    button {
      border: none;
      cursor: pointer;
      background-color: #fece51;
      flex: 1;

      @include sm {
        padding: 10px;
      }

      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}

// src/routes/layout/layout.scss
@import "../../responsive.scss";

.layout {
  height: 100vh;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;

  @include lg{
    // background-color: rgb(247, 210, 196);
    max-width: 1280px;
  }

  @include md{
    // background-color: rgb(186, 203, 234);
    max-width: 768px;
  }

  @include sm{
    // background-color: rgb(239, 200, 200);
    max-width: 640px;
  }

  .content {
    // flex: 1;
    height: calc(100vh - 100px);
  }
}

React Map Tutorial (Open Source Map Library)

講解會使用 Open Source Map
在 components 資料夾裡面建立 map 資料夾
在 map 資料夾裡面建立 Map.jsx 檔案
在 map 資料夾裡面建立 map.scss 檔案
修改 Map.jsx 檔案，使用程式碼片段 fcs 快速建立

// src/components/map/Map.jsx
import './map.scss'

function Map(){
  return (
    <div className='map'>Map</div>
  )
}

export default Map

// src/components/map/map.scss
.map {
  
}

React Leaflet Map Tutorial

使用 React Leaflet
安裝 React Leaflet 套件 – npm install react-leaflet leaflet
修改 Map.jsx 檔案
修改 map.scss 檔案
修改 listPage.jsx 檔案
修改 listPage.scss 檔案
修改 Map.jsx 檔案，匯入 leaflet.css 檔案
修改 listPage.jsx 檔案，items
修改 Map.jsx 檔案，items
在 components 資料夾裡面建立 pin 資料夾
在 pin 資料夾裡面建立 Pin.jsx 檔案
在 pin 資料夾裡面建立 pin.scss 檔案
修改 Pin.jsx 檔案，使用程式碼片段 fcs 快速建立
修改 pin.scss 檔案
修改 Map.jsx 檔案
修改 Pin.jsx 檔案
修改 Map.jsx 檔案
修改 pin.scss 檔案
修改 Pin.jsx 檔案

// src/components/map/Map.jsx
import { MapContainer, TileLayer } from 'react-leaflet'
import './map.scss'
import 'leaflet/dist/leaflet.css'
import Pin from '../pin/Pin'

function Map({items}){
  return (
    <MapContainer center={[52.4797, -1.90269]} zoom={7} scrollWheelZoom={false} className='map'>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {items.map(item=>(
        <Pin item={item} key={item.id} />
      ))}
    </MapContainer>
  )
}

export default Map

// src/components/map/map.scss
.map {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

// src/routes/listPage/listPage.jsx
import { listData } from '../../lib/dummydata'
import './listPage.scss'
import Filter from '../../components/filter/Filter'
import Card from '../../components/card/Card'
import Map from '../../components/map/Map';

function ListPage(){
  const data = listData;
  
  return (
    <div className='listPage'>
      <div className="listContainer">
        <div className="wrapper">
          <Filter />
          { data.map(item => (
            <Card key={item.id} item={item} />
          ))}
        </div>
      </div>
      <div className="mapContainer">
        <Map items={data} />
      </div>
    </div>
  )
}

export default ListPage

// src/routes/listPage/listPage.scss
.listPage {
  display: flex;
  height: 100%;

  .listContainer {
    flex: 3;
    height: 100%;

    .wrapper {
      height: 100%;
      padding-right: 50px;
      display: flex;
      flex-direction: column;
      gap: 50px;
      overflow-y: scroll;
      padding-bottom: 50px;
    }
  }
  .mapContainer {
    flex: 2;
    height: 100%;
    background-color: #fcf5f3;
  }
}

// src/components/pin/Pin.jsx
import { Marker, Popup } from 'react-leaflet'
import './pin.scss'
import { Link } from 'react-router-dom'

function Pin({ item }){
  return (
    <Marker position={[item.latitude, item.longitude]}>
      <Popup>
        <div className="popupContainer">
          <img src={item.img} alt="" />
          <div className="textContainer">
            <Link to={`/${item.id}`}>{item.title}</Link>
            <span>{item.bedroom} bedroom</span>
            <b>$ {item.price}</b>
          </div>
        </div>
      </Popup>
    </Marker>
  )
}

export default Pin

// src/components/pin/pin.scss
.popupContainer {
  display: flex;
  gap: 20px;

  img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 5px;
  }

  .textContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

React.js Responsive Single Page Design

修改 singlePage.jsx 檔案
修改 singlePage.scss 檔案
在 components 資料夾裡面建立 slider 資料夾
在 slider 資料夾裡面建立 Slider.jsx 檔案
在 slider 資料夾裡面建立 slider.scss 檔案
修改 Slider.jsx 檔案，使用程式碼片段 fcs 快速建立
修改 singlePage.jsx 檔案
修改 dummydata.js 檔案，singlePostData、userData
修改 singlePage.jsx 檔案
修改 singlePage.scss 檔案
修改 singlePage.jsx 檔案
修改 singlePage.scss 檔案

// src/routes/singlePage/singlePage.jsx
import './singlePage.scss'
import Slider from '../../components/slider/Slider'
import { singlePostData } from '../../lib/dummydata'
import { userData } from '../../lib/dummydata'

function SinglePage(){
  return (
    <div className='singlePage'>
      <div className="details">
        <div className="wrapper">
          <Slider images={singlePostData.images} />
          <div className="info">
            <div className="top">
              <div className="post">
                <h1>{singlePostData.title}</h1>
                <div className="address">
                  <img src="/pin.png" alt="" />
                  <span>{singlePostData.address}</span>
                </div>
                <div className="price">$ {singlePostData.price}</div>
              </div>
              <div className="user">
                <img src={userData.img} alt="" />
                <span>{userData.name}</span>
              </div>
            </div>
            <div className="bottom">
              {singlePostData.description}
            </div>
          </div>
        </div>
      </div>
      <div className="features">
        <div className="wrapper"></div>
      </div>
    </div>
  )
}

export default SinglePage

// src/routes/singlePage/singlePage.scss
.singlePage {
  display: flex;
  height: 100%;

  .details {
    flex: 3;

    .wrapper {
      padding-right: 50px;

      .info {
        .top {
          display: flex;
          justify-content: space-between;

          .post {
            display: flex;
            flex-direction: column;
            gap: 20px;
            h1 {
              font-weight: 400;
            }

            .address {
              display: flex;
              gap: 5px;
              align-items: center;
              color: #888;
              font-size: 14px;

              img {
                width: 16px;
                height: 16px;
              }
            }

            .price {
              padding: 5px;
              background-color: rgba(254, 205, 81, 0.438);
              border-radius: 5px;
              width: max-content;
              font-size: 20px;
              font-weight: 300;
            }
          }

          .user {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 0px 50px;
            border-radius: 10px;
            background-color: rgba(254, 205, 81, 0.209);
            font-weight: 600;

            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              object-fit: cover;
            }
          }
        }

        .bottom {
          margin-top: 50px;
          color: #555;
          line-height: 20px;
        }
      }
    }
  }

  .features {
    flex: 2;
    background-color: #fcf5f3;

    .wrapper {
      padding: 0px 20px;
    }
  }
}

// src/components/slider/Slider.jsx
import './slider.scss'

function Slider(){
  return (
    <div className='slider'>Slider</div>
  )
}

export default Slider

// src/components/slider/slider.scss
.slider {

}

// src/lib/dummydata.js
export const listData = [
  {
    id: 1,
    title: "A Great Apartment Next to the Beach!",
    img: "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 2,
    bathroom: 1,
    price: 1000,
    address: "456 Park Avenue, London",
    latitude: 51.5074,
    longitude: -0.1278,
  },
  {
    id: 2,
    title: "An Awesome Apartment Near the Park! Almost too good to be true!",
    img: "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 3,
    bathroom: 2,
    price: 1500,
    address: "789 Oxford Street, London",
    latitude: 52.4862,
    longitude: -1.8904,
  },
  {
    id: 3,
    title: "A New Apartment in the City!",
    img: "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 1,
    bathroom: 1,
    price: 800,
    address: "101 Baker Street, London",
    latitude: 53.4808,
    longitude: -2.2426,
  },
  {
    id: 4,
    title: "Great Location! Great Price! Great Apartment!",
    img: "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 2,
    bathroom: 1,
    price: 1000,
    address: "234 Kingsway, London,",
    latitude: 53.8008,
    longitude: -1.5491,
  },
  {
    id: 5,
    title: "Apartment 5",
    img: "https://images.pexels.com/photos/276625/pexels-photo-276625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 3,
    bathroom: 2,
    price: 1500,
    address: "567 Victoria Road, London",
    latitude: 53.4084,
    longitude: -2.9916,
  },
  {
    id: 6,
    title: "Apartment 6",
    img: "https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 1,
    bathroom: 1,
    price: 800,
    address: "890 Regent Street, London",
    latitude: 54.9783,
    longitude: -1.6174,
  },
  {
    id: 7,
    title: "Apartment 7",
    img: "https://images.pexels.com/photos/2029667/pexels-photo-2029667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 2,
    bathroom: 1,
    price: 1000,
    address: "112 Piccadilly, London",
    latitude: 53.3811,
    longitude: -1.4701,
  },
  {
    id: 8,
    title: "Apartment 8",
    img: "https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    bedroom: 3,
    bathroom: 2,
    price: 1500,
    address: "8765 Main High Street, London",
    latitude: 51.4545,
    longitude: -2.5879,
  },
];

export const singlePostData = {
  id: 1,
  title: "Beautiful Apartment",
  price: 1200,
  images: [
    "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  ],
  bedRooms: 2,
  bathroom: 1,
  size: 861,
  latitude: 51.5074,
  longitude: -0.1278,
  city: "London",
  address: "1234 Broadway St",
  school: "250m away",
  bus: "100m away",
  restaurant: "50m away",
  description:
    "Future alike hill pull picture swim magic chain seed engineer nest outer raise bound easy poetry gain loud weigh me recognize farmer bare danger. actually put square leg vessels earth engine matter key cup indeed body film century shut place environment were stage vertical roof bottom lady function breeze darkness beside tin view local breathe carbon swam declared magnet escape has from pile apart route coffee storm someone hold space use ahead sheep jungle closely natural attached part top grain your grade trade corn salmon trouble new bend most teacher range anybody every seat fifteen eventually",
};

export const userData = {
  id: 1,
  name: "John Doe",
  img: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
};

React.js Image Slider Tutorial From Scratch

修改 Slider.jsx 檔案
修改 slider.scss 檔案
修改 singlePage.scss 檔案
修改 Slider.jsx 檔案
修改 slider.scss 檔案
修改 Slider.jsx 檔案
修改 slider.scss 檔案
修改 Slider.jsx 檔案
修改 slider.scss 檔案
修改 Slider.jsx 檔案
修改 slider.scss 檔案
修改 Slider.jsx 檔案

// src/components/slider/Slider.jsx
import { useState } from 'react'
import './slider.scss'

function Slider({ images }){
  const [imageIndex, setImageIndex ] = useState(null);

  const changeSlide = (direction) => {
    if (direction==="left") {
      if (imageIndex === 0) {
        setImageIndex(images.length - 1);
      } else {
        setImageIndex(imageIndex - 1);
      }
    } else {
      if (imageIndex === images.length - 1) {
        setImageIndex(0);
      } else {
        setImageIndex(imageIndex + 1);
      }
    } 
  }

  return (
    <div className='slider'>
      { imageIndex !== null && (
      <div className="fullSlider">
        <div className="arrow" onClick={() => changeSlide("left")}>
          <img src="/arrow.png" alt="" />
        </div>
        <div className="imgContainer">
          <img src={images[imageIndex]} alt="" />
        </div>
        <div className="arrow" onClick={() => changeSlide("right")}>
          <img src="/arrow.png" className='right' alt="" />
        </div>
        <div className="close" onClick={() => setImageIndex(null)}>X</div>
      </div>
      )}
      <div className="bigImage">
        <img src={images[0]} alt="" onClick={() => setImageIndex(0)} />
      </div>
      <div className="smallImage">
        {images.slice(1).map((image, index) => (
          <img src={image} alt="" key={index} onClick={() => setImageIndex(index+1)}  />
        ))}
      </div>
    </div>
  )
}

export default Slider

// src/components/slider/slider.scss
.slider {
  width: 100%;
  height: 350px;
  display: flex;
  gap: 20px;

  .fullSlider {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .arrow {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 50px;

        &.right {
          transform: rotate(180deg);
        }
      }
    }

    .imgContainer {
      flex: 10;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .close {
      position: absolute;
      top: 0;
      right: 0;
      color: white;
      font-size: 36px;
      font-weight: bold;
      padding: 50px;
      cursor: pointer;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
  }

  .bigImage {
    flex: 3;
  }

  .smallImage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    
    img {
      height: 100px;
    }
  }
}

// src/components/singlePage.scss
.singlePage {
  display: flex;
  height: 100%;

  .details {
    flex: 3;

    .wrapper {
      padding-right: 50px;

      .info {
        margin-top: 50px;
        
        .top {
          display: flex;
          justify-content: space-between;

          .post {
            display: flex;
            flex-direction: column;
            gap: 20px;
            h1 {
              font-weight: 400;
            }

            .address {
              display: flex;
              gap: 5px;
              align-items: center;
              color: #888;
              font-size: 14px;

              img {
                width: 16px;
                height: 16px;
              }
            }

            .price {
              padding: 5px;
              background-color: rgba(254, 205, 81, 0.438);
              border-radius: 5px;
              width: max-content;
              font-size: 20px;
              font-weight: 300;
            }
          }

          .user {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 0px 50px;
            border-radius: 10px;
            background-color: rgba(254, 205, 81, 0.209);
            font-weight: 600;

            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              object-fit: cover;
            }
          }
        }

        .bottom {
          margin-top: 50px;
          color: #555;
          line-height: 20px;
        }
      }
    }
  }

  .features {
    flex: 2;
    background-color: #fcf5f3;

    .wrapper {
      padding: 0px 20px;
    }
  }
}

Property Features Design

修改 singlePage.jsx 檔案
修改 singlePage.scss 檔案
修改 singlePage.jsx 檔案，修正程式碼
修改 singlePage.scss 檔案
修改 slider.scss 檔案

// src/routes/singlePage/singlePage.jsx
import './singlePage.scss'
import Slider from '../../components/slider/Slider'
import Map from '../../components/map/Map'
import { singlePostData, userData } from '../../lib/dummydata'

function SinglePage(){
  return (
    <div className='singlePage'>
      <div className="details">
        <div className="wrapper">
          <Slider images={singlePostData.images} />
          <div className="info">
            <div className="top">
              <div className="post">
                <h1>{singlePostData.title}</h1>
                <div className="address">
                  <img src="/pin.png" alt="" />
                  <span>{singlePostData.address}</span>
                </div>
                <div className="price">$ {singlePostData.price}</div>
              </div>
              <div className="user">
                <img src={userData.img} alt="" />
                <span>{userData.name}</span>
              </div>
            </div>
            <div className="bottom">
              {singlePostData.description}
            </div>
          </div>
        </div>
      </div>
      <div className="features">
        <div className="wrapper">
          <p className='title'>General</p>
          <div className="listVertical">
            <div className="feature">
              <img src="/utility.png" alt="" />
              <div className="featureText">
                <span>Utilities</span>
                <p>Renter is responsible</p>
              </div>
            </div>
            <div className="feature">
              <img src="/pet.png" alt="" />
              <div className="featureText">
                <span>Pet Policy</span>
                <p>Pets Allowed</p>
              </div>
            </div>
            <div className="feature">
              <img src="/fee.png" alt="" />
              <div className="featureText">
                <span>Property Fees</span>
                <p>must have 3x the rent in total household income</p>
              </div>
            </div>
          </div>
          <p className='title'>Room Sizes</p>
          <div className="sizes">
            <div className="size">
              <img src="/size.png" alt="" />
              <span>80 sqft</span>
            </div>
            <div className="size">
              <img src="/bed.png" alt="" />
              <span>2 beds</span>
            </div>
            <div className="size">
              <img src="/bath.png" alt="" />
              <span>1 bathroom</span>
            </div>
          </div>
          <p className='title'>Nearby Places</p>
          <div className="listHorizontal">
            <div className="feature">
              <img src="/school.png" alt="" />
              <div className="featureText">
                <span>School</span>
                <p>250m away</p>
              </div>
            </div>
            <div className="feature">
              <img src="/pet.png" alt="" />
              <div className="featureText">
                <span>Bus Stop</span>
                <p>100m away</p>
              </div>
            </div>
            <div className="feature">
              <img src="/fee.png" alt="" />
              <div className="featureText">
                <span>Restaurant</span>
                <p>200m away</p>
              </div>
            </div>
          </div>
          <p className='title'>Location</p>
          <div className="mapContainer">
            <Map items={[singlePostData]} />
          </div>
          <div className="buttons">
            <button>
              <img src="/chat.png" alt="" />
              Send a Message
            </button>
            <button>
              <img src="/save.png" alt="" />
              Save the Place
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default SinglePage

// src/routes/singlePage/singlePage.scss
@import '../../responsive.scss';

.singlePage {
  display: flex;
  height: 100%;

  @include md {
    flex-direction: column;
    overflow: scroll;
  }

  .details {
    flex: 3;
    height: 100%;
    overflow-y: scroll;

    @include md {
      flex: none;
      height: max-content;
      margin-bottom: 50px;
    }

    .wrapper {
      padding-right: 50px;

      @include lg {
        padding-right: 20px;
      }

      @include md {
        padding-right: 0px;
      }

      .info {
        margin-top: 50px;
        
        .top {
          display: flex;
          justify-content: space-between;

          .post {
            display: flex;
            flex-direction: column;
            gap: 20px;
            h1 {
              font-weight: 400;
            }

            .address {
              display: flex;
              gap: 5px;
              align-items: center;
              color: #888;
              font-size: 14px;

              img {
                width: 16px;
                height: 16px;
              }
            }

            .price {
              padding: 5px;
              background-color: rgba(254, 205, 81, 0.438);
              border-radius: 5px;
              width: max-content;
              font-size: 20px;
              font-weight: 300;
            }
          }

          .user {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 0px 50px;
            border-radius: 10px;
            background-color: rgba(254, 205, 81, 0.209);
            font-weight: 600;

            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              object-fit: cover;
            }
          }
        }

        .bottom {
          margin-top: 50px;
          color: #555;
          line-height: 20px;
        }
      }
    }
  }

  .features {
    flex: 2;
    background-color: #fcf5f3;
    height: 100%;
    overflow-y: scroll;

    @include md {
      flex: none;
      height: max-content;
      margin-bottom: 50px;
    }

    .wrapper {
      padding: 0px 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;

      img {
        width: 24px;
        height: 24px;
      }

      .title {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
      }

      .feature {
        display: flex;
        align-items: center;
        gap: 10px;

        img {
          background-color: rgba(254, 205, 81, 0.209);
        }

        .featureText {
          span {
            font-weight: bold;
          }

          p {
            font-size: 14px;
          }
        }
      }

      .listVertical {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        background-color: white;
        border-radius: 10px;
      }

      .listHorizontal {
        display: flex;
        justify-content: space-between;
        padding: 20px 10px;
        background-color: white;
        border-radius: 10px;
      }

      .sizes {
        display: flex;
        justify-content: space-between;

        @include lg {
          font-size: 12px;
        }

        .size {
          display: flex;
          align-items: center;
          gap: 10px;
          background-color: white;
          padding: 10px;
          border-radius: 5px;
        }
      }

      .mapContainer {
        width: 100%;
        height: 200px;
      }

      .buttons {
        display: flex;
        justify-content: space-between;

        button {
          padding: 20px;
          display: flex;
          align-items: center;
          gap: 5px;
          background-color: white;
          border: 1px solid #fece51;
          border-radius: 5px;
          cursor: pointer;

          img {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}

// src/components/slider/slider.scss
@import '../../responsive.scss';

.slider {
  width: 100%;
  height: 350px;
  display: flex;
  gap: 20px;

  .fullSlider {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;

    .arrow {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 50px;

        @include md {
          width: 30px;
        }

        @include sm {
          width: 20px;
        }

        &.right {
          transform: rotate(180deg);
        }
      }
    }

    .imgContainer {
      flex: 10;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .close {
      position: absolute;
      top: 0;
      right: 0;
      color: white;
      font-size: 36px;
      font-weight: bold;
      padding: 50px;
      cursor: pointer;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
  }

  .bigImage {
    flex: 3;
  }

  .smallImage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    
    img {
      height: 100px;
    }
  }
}

React.js Responsive Profile Page Design

在 routes 資料夾裡面建立 profilePage 資料夾
在 profilePage 資料夾裡面建立 profilePage.jsx 檔案
在 profilePage 資料夾裡面建立 profilePage.scss 檔案
修改 profilePage.jsx 檔案，使用程式碼片段 fcs 快速建立
修改 profilePage.scss 檔案
修改 App.jsx 檔案
修改 Navbar.jsx 檔案
修改 navbar.scss 檔案
修改 Navbar.jsx 檔案
修改 navbar.scss 檔案
修改 Navbar.jsx 檔案
修改 navbar.scss 檔案
修改 profilePage.jsx 檔案
在 components 資料夾裡面建立 list 資料夾
在 list 資料夾裡面建立 List.jsx 檔案
在 list 資料夾裡面建立 list.scss 檔案
修改 List.jsx 檔案，使用程式碼片段 fcs 快速建立
修改 list.scss 檔案
修改 List.jsx 檔案
修改 profilePage.jsx 檔案
修改 profilePage.scss 檔案
修改 list.scss 檔案
修改 profilePage.scss 檔案

// src/routes/profilePage/profilePage.jsx
import List from '../../components/list/List'
import './profilePage.scss'

function ProfilePage(){
  return (
    <div className='profilePage'>
      <div className="details">
        <div className="wrapper">
          <div className="title">
            <h1>User Information</h1>
            <button>Update Profile</button>
          </div>
          <div className="info">
            <span>
              Avatar:
              <img src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="" />
            </span>
            <span>Username: <b>John Doe</b></span>
            <span>E-mail: <b>john@gmail.com</b></span>
          </div>
          <div className="title">
            <h1>My List</h1>
            <button>Create New Post</button>
          </div>
          <List />
          <div className="title">
            <h1>Saved List</h1>
          </div>
          <List />
        </div>
      </div>
      <div className="chatContainer">
        <div className="wrapper"></div>
      </div>
    </div>
  )
}

export default ProfilePage

// src/routes/profilePage/profilePage.scss
.profilePage {
  display: flex;
  height: 100%;

  .details {
    flex: 3;
    overflow-y: scroll;
    padding-bottom: 50px;

    .wrapper {
      padding-right: 50px;
      display: flex;
      flex-direction: column;
      gap: 50px;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        h1 {
          font-weight: 300;
        }

        button {
          padding: 12px 24px;
          background-color: #fece51;
          cursor: pointer;
          border: none;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        gap: 20px;

        span {
          display: flex;
          align-items: center;
          gap: 20px;
        }

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover;
        }
      }
    }
  }

  .chatContainer {
    flex: 2;
    background-color: #fcf5f3;
    height: 100%;

    .wrapper {
      padding: 0px 20px;
    }
  }
}

// src/App.jsx
import HomePage from './routes/homePage/homePage'
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom'
import ListPage from './routes/listPage/listPage'
import Layout from './routes/layout/layout'
import SinglePage from './routes/singlePage/singlePage'
import ProfilePage from './routes/profilePage/profilePage'

function App() {

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Layout />,
      children: [
        {
          path: "/",
          element: <HomePage />
        },
        {
          path: "/list",
          element: <ListPage />
        },
        {
          path: "/:id",
          element: <SinglePage />
        },
        {
          path: "/profile",
          element: <ProfilePage />
        }
      ]
    },
  ]);

  return (
    <RouterProvider router={router} />
  )
}

export default App

// src/components/navbar/Navbar.jsx
import { Link } from "react-router-dom"
import { useState } from "react"
import "./navbar.scss"

function Navbar() {
  const [open, setOpen] = useState(false);
  
  const user = true;
  return (
    <nav>
      <div className="left">
        <Link to="/" className="logo">
          <img src="/logo.png" />
          <span>LamaEstate</span>
        </Link>
        <Link to="/">Home</Link>
        <Link to="/">About</Link>
        <Link to="/">Contact</Link>
        <Link to="/">Agents</Link>
      </div>
      <div className="right">
        {user ? (
          <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="" />
            <span>John Doe</span>
            <Link to="/profile" className="profile">
              <div className="notification">3</div>
              <span>Profile</span>
            </Link>
          </div>
        ) : (
          <>
            <Link to="/">Sign in</Link>
            <Link to="/" className="register">Sign up</Link>
          </>
        )}
        <div className="menuIcon">
          <img src="/menu.png" alt="" onClick={() => setOpen((prev) => !prev)} />
        </div>
        <div className={open ? "menu active" : "menu"}>
          <Link to="/">Home</Link>
          <Link to="/">About</Link>
          <Link to="/">Contact</Link>
          <Link to="/">Agents</Link>
          <Link to="/">Sign in</Link>
          <Link to="/">Sign up</Link>
        </div>
      </div>
    </nav>
  )
}

export default Navbar;

// src/components/navbar/navbar.scss
@import "../../responsive.scss";

nav {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  a {
    transition: all 0.4s ease;

    @include sm {
      display: none;
    }

    &:hover {
      scale: 1.05;
    }
  }

  .left{
    flex: 3;
    display: flex;
    align-items: center;
    gap: 50px;

    .logo {
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;
      gap: 10px;

      img {
        width: 28px;
      }

      span {
        @include md {
          display: none;
        }

        @include sm {
          display: initial;
        }
      }
    }
  }
  .right{
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #fcf5f3;
    height: 100%;

    @include md {
      background-color: transparent;
    }

    a {
      padding: 12px 24px;
      margin: 20px;
    }

    .user {
      display: flex;
      align-items: center;
      font-weight: bold;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 20px;
      }

      span {
        @include sm {
          display: none;
        }
      }

      .profile {
        padding: 12px 24px;
        background-color: #fece51;
        cursor: pointer;
        border: none;
        position: relative;

        .notification {
          position: absolute;
          top: -8px;
          right: -8px;
          background-color: red;
          color: white;
          border-radius: 50%;
          width: 26px;
          height: 26px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .register {
      background-color: #fece51;
    }

    .menuIcon {
      display: none;
      z-index: 999;

      img {
        width: 36px;
        height: 36px;
        cursor: pointer;
      }

      @include sm {
        display: inline;
      }
    }

    .menu {
      position: absolute;
      top: 0;
      right: -50%;
      background-color: black;
      color: white;
      height: 100vh;
      width: 50%;
      transition: all 1s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24px;

      &.active {
        right: 0;
      }

      @include sm {
        a {
          display: initial;
        }
      }
    }
  }
}

// src/components/list/List.jsx
import './list.scss'
import Card from '../card/Card'
import { listData } from '../../lib/dummydata'

function List(){
  return (
    <div className='list'>
      {listData.map(item=>(
        <Card key={item.id} item={item} />
      ))}
    </div>
  )
}

export default List

// src/components/list/list.scss
.list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

React.js Chat Component Design

在 components 資料夾裡面建立 chat 資料夾
在 chat 資料夾裡面建立 Chat.jsx 檔案
在 chat 資料夾裡面建立 chat.scss 檔案
修改 Chat.jsx 檔案，使用程式碼片段 fcs 快速建立
修改 chat.scss 檔案
修改 Chat.jsx 檔案
修改 chat.scss 檔案
修改 profilePage.jsx 檔案
修改 chat.scss 檔案
修改 profilePage.scss 檔案

// src/components/Chat.jsx
import './chat.scss'

function Chat(){
  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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
      <div className="chatBox">box</div>
    </div>
  )
}

export default Chat

// src/components/chat/chat.scss
.chat {
  height: 100%;
  display: flex;
  flex-direction: column;

  .messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: scroll;

    h1 {
      font-weight: 300;
    }

    .message {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 20px;
      cursor: pointer;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
      }

      span {
        font-weight: bold;
      }
    }
  }

  .chatBox {
    flex: 1;
  }
}

// src/routes/profilePage/profilePage.jsx
import Chat from '../../components/chat/Chat'
import List from '../../components/list/List'
import './profilePage.scss'

function ProfilePage(){
  return (
    <div className='profilePage'>
      <div className="details">
        <div className="wrapper">
          <div className="title">
            <h1>User Information</h1>
            <button>Update Profile</button>
          </div>
          <div className="info">
            <span>
              Avatar:
              <img src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="" />
            </span>
            <span>Username: <b>John Doe</b></span>
            <span>E-mail: <b>john@gmail.com</b></span>
          </div>
          <div className="title">
            <h1>My List</h1>
            <button>Create New Post</button>
          </div>
          <List />
          <div className="title">
            <h1>Saved List</h1>
          </div>
          <List />
        </div>
      </div>
      <div className="chatContainer">
        <div className="wrapper">
          <Chat />
        </div>
      </div>
    </div>
  )
}

export default ProfilePage

// src/routes/profilePage/profilePage.scss
.profilePage {
  display: flex;
  height: 100%;

  .details {
    flex: 3;
    overflow-y: scroll;
    padding-bottom: 50px;

    .wrapper {
      padding-right: 50px;
      display: flex;
      flex-direction: column;
      gap: 50px;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        h1 {
          font-weight: 300;
        }

        button {
          padding: 12px 24px;
          background-color: #fece51;
          cursor: pointer;
          border: none;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        gap: 20px;

        span {
          display: flex;
          align-items: center;
          gap: 20px;
        }

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover;
        }
      }
    }
  }

  .chatContainer {
    flex: 2;
    background-color: #fcf5f3;
    height: 100%;

    .wrapper {
      padding: 0px 20px;
      height: 100%;
    }
  }
}

React Messenger Chat Window Design

修改 Chat.jsx 檔案
修改 chat.scss 檔案
修改 Chat.jsx 檔案
修改 chat.scss 檔案
修改 profilePage.scss 檔案
修改 card.scss 檔案

// src/components/chat/Chat.jsx
import { useState } from 'react'
import './chat.scss'

function Chat(){
  const [chat, setChat] = useState(true);

  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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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>John Doe</span>
          <p>Lorem ipsum dolor sit amet...</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="" />
            John Doe
          </div>
          <span className="close" onClick={()=>setChat(null)}>X</span>
        </div>
        <div className="center">
          <div className="chatMessage">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage own">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage own">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage own">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage own">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
          <div className="chatMessage own">
            <p>Lorem ipsum dolor sit amet</p>
            <span>1 hour ago</span>
          </div>
        </div>
        <div className="bottom">
          <textarea></textarea>
          <button>Send</button>
        </div>
      </div>
      )}
    </div>
  )
}

export default Chat

// src/components/chat/chat.scss
.chat {
  height: 100%;
  display: flex;
  flex-direction: column;

  .messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: scroll;

    h1 {
      font-weight: 300;
    }

    .message {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 20px;
      cursor: pointer;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
      }

      span {
        font-weight: bold;
      }
    }
  }

  .chatBox {
    flex: 1;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      background-color: #f7c14b85;
      padding: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .user {
        display: flex;
        align-items: center;
        gap: 20px;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          object-fit: cover;
        }
      }

      .close {
        cursor: pointer;
      }
    }

    .center {
      height: 350px;
      overflow: scroll;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .chatMessage {
        width: 50%;
        
        &.own {
          align-self: flex-end;
          text-align: right;
        }

        span {
          font-size: 12px;
          background-color: #f7c14b39;
          padding: 2px;
          border-radius: 5px;
        }
      }
    }

    .bottom {
      border-top: 2px solid #f7c14b85;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      textarea {
        flex: 3;
        height: 100%;
        border: none;
        padding: 20px;
      }
      
      button {
        flex: 1;
        background-color: #f7c14b85;
        height: 100%;
        border: none;
        cursor: pointer;
      }
    }
  }
}

// src/routes/profilePage/profilePage.scss
@import '../../responsive.scss';

.profilePage {
  display: flex;
  height: 100%;

  @include md {
    flex-direction: column;
    overflow: scroll;
  }

  .details {
    flex: 3;
    overflow-y: scroll;
    padding-bottom: 50px;

    @include md {
      flex: none;
      height: max-content;
    }

    .wrapper {
      padding-right: 50px;
      display: flex;
      flex-direction: column;
      gap: 50px;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        h1 {
          font-weight: 300;
        }

        button {
          padding: 12px 24px;
          background-color: #fece51;
          cursor: pointer;
          border: none;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        gap: 20px;

        span {
          display: flex;
          align-items: center;
          gap: 20px;
        }

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover;
        }
      }
    }
  }

  .chatContainer {
    flex: 2;
    background-color: #fcf5f3;
    height: 100%;

    @include md {
      flex: none;
      height: max-content;
    }

    .wrapper {
      padding: 0px 20px;
      height: 100%;
    }
  }
}

// src/components/card/card.scss
@import '../../responsive.scss';

.card {
  display: flex;
  gap: 20px;

  .imageContainer {
    flex: 2;
    height: 200px;

    @include sm {
      display: none;
    }

    img {
      width: 100%;
      height: 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.4s 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: 300;
      padding: 5px;
      border-radius: 5px;
      background-color: rgba(254, 205, 81, 0.438);
      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;
          background-color: whitesmoke;
          padding: 5px;
          border-radius: 5px;
        }
      }

      .icons {
        display: flex;
        gap: 20px;

        .icon {
          border: 1px solid #999;
          padding: 2px 5px;
          border-radius: 5px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background-color: lightgray;
          }
        }
      }
    }
  }
}