Add Guests PopUp (#97)

src/components/AddGuestsPopUp/AddGuestsPopUp.jsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import Styles from './AddGuestsPopUp.module.css';
+import Guest from './Guest/Guest';
+
+const AddGuestsPopUp = () => {
+    const [guestsList, setGuestsList] = useState({typeofGuest:0,numberOfGuests:0});
+    const guests = [
+        {index:1, title:'Adults', description:'Ages 13 or above', descriptionType:'string'},
+        {index:2, title:'Children', description:'Ages 2 - 12', descriptionType:'string'},
+        {index:3, title:'Infants', description:'Under 2', descriptionType:'string'},
+        {index:4, title:'Pets', description:'Bringing a service animal?', descriptionType:'link'}
+    ];
+    const handelGuestClick = (guest) =>{
+        setGuestsList(guest);
+    }
+    return(
+        <div className={Styles.popup}>
+            {guests.map((guest)=> 
+                    <Guest 
+                        key = {guest.index} 
+                        title = {guest.title} 
+                        description = {guest.description}
+                        descriptionType = {guest.descriptionType}
+                        onClick={(e)=>handelGuestClick(e)}
+                    />
+                )
+            }
+        </div>
+    )
+}
+export default AddGuestsPopUp;

src/components/AddGuestsPopUp/AddGuestsPopUp.module.css

@@ -0,0 +1,11 @@
+.popup {
+    display: flex;
+    flex-direction: column;
+    max-width: 350px;
+    max-height: 644px;
+    background-color: white;
+    border-radius: 32px;
+    padding: 32px;
+    color: black;
+    display: block;
+}

src/components/AddGuestsPopUp/Guest/Guest.jsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import Styles from './Guest.module.css';
+
+const Guest = ({title, description, descriptionType, onClick}) => {
+    const[count, setCount] = useState(0);
+    const handelMinusCount = () => {
+       {count > 0 && setCount(count - 1)};
+       onClick({typeofGuest:title,numberOfGuests:count - 1}); 
+    };
+    const handelPlusCount = () => {
+        setCount(count + 1);
+        onClick({typeofGuest:title,numberOfGuests:count + 1}); 
+    };
+
+    return(
+        <div className={Styles.container}>
+            <div className={Styles.detailContainer}>
+                <div className={Styles.title}>{title}</div>
+                    {descriptionType === 'string' ? 
+                        <div>{description}</div> :
+                        <div className={Styles.descriptionLink}>{description}</div>
+                    }
+            </div>
+            <div className={Styles.buttonContainer}>
+                    <button className={count !== 0 ? Styles.button : Styles.buttonDisable} onClick={handelMinusCount}>-</button>
+                    <div className={Styles.count}>{count}</div>
+                    <button className={Styles.button} onClick={handelPlusCount}>+</button>
+            </div>
+
+        </div>
+    )
+}
+export default Guest;

src/components/AddGuestsPopUp/Guest/Guest.module.css

@@ -0,0 +1,80 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-top: 1px solid rgb(176, 176, 176);
+    min-height: 50px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.container:first-child { 
+    border-top: none; 
+}
+.detailContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    flex: 3;
+    font-size: 14px;
+}
+.title {
+    font-size: 16px;
+    font-weight: 600;
+}
+.descriptionLink {
+    text-decoration: underline;
+    color: rgb(106, 106, 106);
+    cursor: pointer;
+}
+.descriptionLink:hover {
+    color: rgb(106, 106, 106);
+}
+.buttonContainer {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+}
+.button {
+    border-radius: 100%;
+    background-color: white;
+    color: black;
+    border: 1px solid rgb(176, 176, 176);
+    width: 25px;
+    height: 25px;
+    padding: 20px;
+    text-align: center;
+    display: inline-flex;
+    font-size: 16px; 
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    color: rgb(106, 106, 106);
+}
+.button:hover {
+    cursor: pointer;
+}
+.buttonDisable {
+    border-radius: 100%;
+    background-color: white;
+    color: rgb(235, 235, 235);
+    border: 1px solid rgb(235, 235, 235);
+    width: 25px;
+    height: 25px;
+    padding: 20px;
+    text-align: center;
+    display: inline-flex;
+    font-size: 16px; 
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    color: rgb(235, 235, 235);
+}
+.buttonDisable:hover {
+    cursor: not-allowed;
+}
+.count {
+    width: 15px;
+    padding: 10px;
+}

src/components/Header/Header.jsx

@@ -5,7 +5,7 @@ import ButtonBeAHost from '../ButtonBeAHost/ButtonBeAHost'
 import LanguageSelector from '../LanguageSelector/LanguageSelector'
 import DestinationPopUp from '../DestinationPopUp/DestinationPopUp'
 import ToggleButtonsStaysExperiences from '../ToggleButtonsStaysExperiences/ToggleButtonsStaysExperiences'
-
+import GuestsPopUp from "../AddGuestsPopUp/AddGuestsPopUp";
 
 const Header = () => {
     const handelRegionClick = (item) => {
@@ -33,8 +33,10 @@ const Header = () => {
             <div className={styles.destinationPopUp}>
                 <DestinationPopUp title='Search by region' onClick={(e) => handelRegionClick(e)} />
             </div>
+            <div>
+                  <GuestsPopUp/>
+            </div>
         </div >
     )
 }
-
 export default Header