Merge pull request #49 from ReDI-School/feature/searchbar

Feature/searchbar

README.md

@@ -50,3 +50,4 @@ Currently, two official plugins are available:
 - Bhagya Samarathunga ( [@BhagyaPrasadSamarathunga] (https://github.com/BhagyaPrasadSamarathunga))
 - Gabriel Melhem ([@GabrielMelhem] (https://github.com/GabrielMelhem))
 - Iman Bajalan ([@BajalanIman](https://github.com/BajalanIman))
+

package.json

@@ -11,6 +11,8 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2"

src/App.jsx

@@ -1,17 +1,52 @@
-import "./App.css";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
-
+import "./App.css";
+import PersonProfile from "./components/personProfile/PersonProfile";
+import SearchBar from "./components/searchBar/SearchBar";
 
 function App() {
+  const [count, setCount] = useState(0);
   const places = [
     { id: "1", name: "Idyllic house by the sea" },
     { id: "2", name: "Studio Zempow / ecological wooden house / photo studio" },
+
     { id: "3", name: "Funen's best ocean view" },
   ];
 
+  const handleAirbnbSearch = ({ location, checkIn, checkOut, guests }) => {
+    // Logic for home search
+  };
+
   return (
     <>
-      <h1 data-testid="heading">Hello F24-Berlin-Web-Circle Typo fixed</h1>
+      <div>
+        <SearchBar
+          checkIn=""
+          checkOut=""
+          guests=""
+          onSearch={handleAirbnbSearch}
+        />
+      </div>
+
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.jsx</code> and save to test HMR
+        </p>
+      </div>
+      <PersonProfile
+        title="Meet your host"
+        image="https://a0.muscache.com/im/pictures/user/d62627ea-ea22-4cf1-b38a-152f1f86a9ed.jpg"
+        name="Raus"
+        role="Superhost"
+        verified={true}
+        reviews={74}
+        rating={4.85}
+        yearsHosting={1}
+      />
+      {/* FOR TESTING */}
       {places.map((place) => {
         return (
           <Link to={`/rooms/${place.id}`} key={place.id}>

src/components/searchBar/SearchBar.css

@@ -0,0 +1,71 @@
+/* src/components/SearchBar.css */
+.search-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: white;
+    padding: 10px;
+    border-radius: 30px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .input-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    width: 160px;
+  }
+
+  .label {
+    margin-bottom: 5px;
+    margin-left: 10px;
+    margin-top: 5px;
+    font-size: 12px;
+    color: #666;
+    font-weight: bold;
+    width: 100%;
+    text-align: left;
+    padding: 0;
+    border: none;
+  }
+
+  .search-bar input {
+    padding: 5px 0;
+    border-radius: 0;
+    border: none;
+    outline: none;
+    width: 100%;
+    background-color: white;
+    text-indent: 10px;
+  }
+
+  .separator {
+    width: 1px;
+    height: 40px;
+    background-color: gray;
+    margin: 0 15px;
+  }
+
+  .circle-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ff385c;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .circle-button:hover {
+    background-color: #e7314d;
+  }
+
+  .circle-button svg {
+    width: 16px;
+    height: 16px;
+  }

src/components/searchBar/SearchBar.jsx

@@ -0,0 +1,68 @@
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState } from "react";
+import "./SearchBar.css";
+
+const SearchBar = ({ checkIn: initialCheckIn, checkOut: initialCheckOut, guests: initialGuests, onSearch }) => {
+  const [location, setLocation] = useState("");
+  const [checkIn, setCheckIn] = useState(initialCheckIn || "");
+  const [checkOut, setCheckOut] = useState(initialCheckOut || "");
+  const [guests, setGuests] = useState(initialGuests || "");
+
+  const handleSearch = () => {
+    //search logic here
+    onSearch({ location, checkIn, checkOut, guests });
+  };
+
+  return (
+    <div className="search-bar">
+      <div className="input-container">
+        <span className="label">Where</span>
+        <input
+          type="text"
+          placeholder="Search destinations"
+          value={location}
+          onChange={(e) => setLocation(e.target.value)}
+        />
+      </div>
+      <div className="separator"></div>
+
+      <div className="input-container">
+        <span className="label">Check in</span>
+        <input
+          type="text"
+          placeholder="Add dates"
+          value={checkIn}
+          onChange={(e) => setCheckIn(e.target.value)}
+        />
+      </div>
+      <div className="separator"></div>
+
+      <div className="input-container">
+        <span className="label">Check out</span>
+        <input
+          type="text"
+          placeholder="Add dates"
+          value={checkOut}
+          onChange={(e) => setCheckOut(e.target.value)}
+        />
+      </div>
+      <div className="separator"></div>
+
+      <div className="input-container">
+        <span className="label">Who</span>
+        <input
+          type="text"
+          placeholder="Add guests"
+          value={guests}
+          onChange={(e) => setGuests(e.target.value)}
+        />
+      </div>
+      <button onClick={handleSearch} className="circle-button">
+        <FontAwesomeIcon icon={faSearch} />
+      </button>
+    </div>
+  );
+};
+
+export default SearchBar;

src/main.jsx

@@ -1,14 +1,16 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
-import App from './App.jsx'
+import App from './App.jsx';
 import ErrorPage from "./error-page";
-import './index.css'
-import Root from './pages/RootLayout/Root.jsx';
+import './index.css';
 import ProductPage from './pages/ProductPage.jsx';
+import Root from './pages/Root.jsx';
+
+
 
 // Root is used to render the basic layout, header and footer for all children elements.
 const router = createBrowserRouter([
@@ -32,7 +34,6 @@ const router = createBrowserRouter([
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-
     <RouterProvider router={router} />
   </StrictMode>,
 )