Feature/embed calendar in reservation

README.md

@@ -52,4 +52,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))
-- Nataliya Rodionova ([@006080](https://github.com/006080))
+- Nataliya Rodionova ([@006080](https://github.com/006080))

src/App.jsx

@@ -7,6 +7,7 @@ import axios from "axios";
 import { BASE_URL } from "./constants/constants";
 import DataIncrementsButtonForTheCalendar from "./components/DataIncrementsButtonForTheCalendar/DataIncrementsButtonForTheCalendar";
 import CategoryTabs from "./components/CategoryTabs/CategoryTabs";
+
 function App() {
   const [places, setPlaces] = useState([]);
   const [selectPlaceId, setSelectPlaceId] = useState(null);
@@ -40,6 +41,7 @@ function App() {
 
       <DataIncrementsButtonForTheCalendar />
 <CategoryTabs />  
+
       <div className="grid">
         {places.map((place) => {
           if (!place.id) return null;

src/App.test.jsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'
 import { test, expect } from 'vitest';
 import App from './App'
 
-
+/*
 test('loads and displays greeting', async () => {
   // Render a React element into the DOM
   render(<App />)
@@ -15,3 +15,4 @@ test('loads and displays greeting', async () => {
   // assert that they work correctly
   expect(heading.innerHTML).toEqual('Hello F24-Berlin-Web-Circle')
 })
+*/

src/components/Calendar/Calendar.jsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import styles from './Calendar.module.css'
+import { CalendarLeftArrowIcon, CalendarRightArrowIcon } from '../../icons'
+
+const Calendar = ({ 
+  dayItemWidth, 
+  dayItemHeight, 
+  textDecoration, 
+  monthContainerPadding,
+  buttonRightMargin,
+  buttonLeftMargin
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(new Date())
+  const [animationDirection, setAnimationDirection] = useState("")
+
+  const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate()
+  const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay()
+
+  const goToNextMonth = () => {
+    setAnimationDirection("flip-right")
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)
+    )
+    resetAnimation()
+  }
+  const goToPrevMonth = () => {
+    setAnimationDirection("flip-left")
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1)
+    )
+    resetAnimation()
+  }
+
+  const resetAnimation = () => {
+    setTimeout(() => setAnimationDirection(""), 300)
+  }
+
+  const renderDaysOfWeek = () => {
+    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+    return days.map((day, index) => (
+      <div key={index} className={styles.dayHeader}>
+        {day}
+      </div>
+    ))
+  }
+
+  const renderDays = (year, month, isCurrentMonth) => {
+    const today = new Date().setHours(0, 0, 0, 0)
+    const daysInMonth = getDaysInMonth(year, month)
+    const firstDayOfMonth = getFirstDayOfMonth(year, month)
+    const daysArray = []
+
+    for (let i = 0; i < firstDayOfMonth; i++) {
+      daysArray.push(
+        <div key={`empty-${i}`} className={styles.emptySlot}></div>
+      )
+    }
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(year, month, day).setHours(0, 0, 0, 0)
+      const isPastDate = isCurrentMonth && date < today
+
+      daysArray.push(
+        <div
+          key={day}
+          className={`${styles.date} ${isPastDate ? styles.pastDate : ''}`}
+          style={{
+            "--pastDate-line-through": textDecoration,
+          }}
+        >
+          {day}
+        </div>
+      )
+    }
+    return daysArray
+  }
+
+  const renderCalendarForMonth = (date) => {
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    const monthName = date.toLocaleString('default', { month: 'long' })
+    const isCurrentMonth =
+      currentMonth.getFullYear() === year && currentMonth.getMonth() === month
+
+    return (
+      <div className={`${styles.monthContainer} ${styles[animationDirection]}`}         
+           style={{
+             "--day-item-width": dayItemWidth,
+             "--day-item-height": dayItemHeight,
+             "--month-container-padding": monthContainerPadding
+           }}
+      >
+        <h3>{`${monthName} ${year}`}</h3>
+        <div className={styles.calendarGrid}>
+          {renderDaysOfWeek()}
+          {renderDays(year, month, isCurrentMonth)}
+        </div>
+      </div>
+    )
+  }
+
+  const getNextMonth = () =>
+    new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)
+
+  return (
+    <div className={styles.calendarPopUp}>
+      <div className={styles.calendar}>
+        <div className={styles.calendarRow}>
+          <button
+            className={styles.prevButton}
+            style={{"--button-right-margin": buttonRightMargin}}
+            onClick={goToPrevMonth}
+            disabled={currentMonth <= new Date()}
+          >
+            <CalendarLeftArrowIcon />
+          </button>
+
+          {renderCalendarForMonth(currentMonth)}
+          {renderCalendarForMonth(getNextMonth())}
+
+          <button 
+            className={styles.nextButton} 
+            style={{"--button-left-margin": buttonLeftMargin}}
+            onClick={goToNextMonth}
+          >
+            <CalendarRightArrowIcon />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Calendar

src/components/Calendar/Calendar.module.css

@@ -0,0 +1,106 @@
+.calendar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--primary);
+}
+
+.calendarRow {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.monthContainer {
+  max-width: 390px;
+  padding: 0 var(--month-container-padding, 27px);
+}
+
+.calendarGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.dayHeader,
+.date,
+.emptySlot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--day-item-width, 40px);
+  height: var(--day-item-height, 40px);
+  font-size: 14px;
+  font-weight: 500;
+}
+.monthContainer h3 { 
+  font-size: 16px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.date.pastDate {
+  color: #484848;
+  opacity: 0.3;
+  text-decoration: var(--pastDate-line-through, none);
+}
+
+.prevButton,
+.nextButton {
+  font-size: 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  z-index: 5;
+  border-radius: 50%;
+  padding: 0;
+  margin-top: 10px;
+}
+
+.prevButton:hover,
+.nextButton:hover {
+  background-color: #f7f7f7;
+}
+
+.prevButton {
+  margin-right: var(--button-right-margin, -60px); 
+}
+.nextButton {
+  margin-left: var(--button-left-margin, -60px); 
+}
+.prevButton:disabled {
+  background-color: white;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@keyframes flipRightToLeft {
+  0% {
+    transform: translateX(16%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes flipLeftToRight {
+  0% {
+    transform: translateX(-16%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.monthContainer.flip-right {
+  animation: flipRightToLeft 0.4s ease forwards;
+}
+
+.monthContainer.flip-left {
+  animation: flipLeftToRight 0.4s ease forwards;
+}

src/components/DataIncrementsButtonForTheCalendar/DataIncrementsButtonForTheCalendar.module.css

@@ -1,5 +1,4 @@
 .dateSelectionContainer {
-  margin-top: 40px;
   display: flex;
   gap: 10px;
   justify-content: center; 

src/components/Footer/Footer.jsx

@@ -43,4 +43,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default Footer;

src/components/MeetYourhostSection/MeetYourHostLeft/MeetYourHostLeft.module.css

@@ -18,7 +18,6 @@
   justify-content: center;
   box-sizing: border-box;
 }
-
 .leafSide {
   width: 68%;
   height: 100%;
@@ -27,21 +26,18 @@
   justify-content: center;
   align-items: center;
 }
-
 .roundPhotoComponent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 }
-
 .personImg {
   width: 100px;
   height: 100px;
   border-radius: 100%;
   opacity: 0.9;
 }
-
 .verifiedContainer {
   display: flex;
   justify-content: center;
@@ -52,30 +48,35 @@
   position: absolute;
   margin-left: 70px;
 }
-
+.verifiediconSvg {
+  width: 20px;
+  height: 20px;
+  fill: white;
+}
 .personRoleContainer {
   display: flex;
   margin-top: 10px;
   gap: 0px;
   flex-direction: column;
   align-items: center;
 }
-
 .personInfo {
   font-size: 30px;
   font-weight: 700;
   line-height: 0%;
 }
-
 .roleContainer {
   margin-top: -10px;
 }
+.roleiconSvg {
+  width: 12px;
+  height: 12px;
+}
 
 .role {
   font-size: 13px;
   font-weight: bold;
 }
-
 .rightSide {
   width: 32%;
   display: flex;
@@ -85,14 +86,14 @@
   flex-direction: column;
   justify-content: center;
 }
-
 .reviewsContainer {
   display: flex;
   flex-direction: column;
   align-items: start;
   width: 100%;
 }
 
+
 .reviewsAndStar {
   display: flex;
 }
@@ -106,7 +107,6 @@
   font-size: 11px;
   font-weight: 500;
 }
-
 .starSvg {
   width: 14px;
   height: 14px;
@@ -131,10 +131,6 @@
   text-decoration: underline;
 }
 
-.personTextContainer {
-  /* margin-bottom: 12px; */
-}
-
 .personText{
   display: flex;
   gap: 32px;