Calendar block (#2551)

* Calendar block

* hot fix

* hot fix

src/components/calendar/Calendar.styles.ts

@@ -0,0 +1,113 @@
+import { TypographyVariantEnum } from '~/types'
+
+export const styles = {
+  calendarContainer: {
+    width: { xs: '87%', sm: '380px', md: '561px' },
+    height: { xs: '257px', sm: '290px', md: '444px' },
+    m: { xs: '87px auto 0px', md: '87px 0px 0px' },
+    backgroundColor: 'basic.white',
+    border: '1px solid basic.lightBlue',
+    borderRadius: '36px',
+    p: { xs: '12px', sm: '12px 24px' },
+    '.MuiCalendarPicker-root': {
+      width: '100%',
+      height: '526px',
+      maxHeight: '526px'
+    },
+    '.MuiDayPicker-header': {
+      display: 'none'
+    },
+    '.MuiDayPicker-weekContainer': {
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      height: { xs: '35px', sm: '40px', md: '72px' }
+    },
+    '.MuiDayPicker-slideTransition': {
+      overflow: 'visible'
+    },
+    '.MuiPickersCalendarHeader-root': {
+      display: 'none'
+    },
+    '.MuiPickersArrowSwitcher-spacer': {
+      display: 'none'
+    }
+  },
+
+  day: {
+    typography: {
+      xs: TypographyVariantEnum.Button,
+      md: TypographyVariantEnum.H6
+    },
+    borderRadius: { xs: '12px', sm: '16px', md: '22.5px' },
+    width: { md: '74px' },
+    height: { md: '60px' },
+    p: { xs: '0px', sm: '20px 25px', md: '18px 30px' },
+    color: 'basic.lightBlue',
+    '&.Mui-selected, &.Mui-selected:hover': {
+      color: 'basic.white',
+      backgroundColor: 'basic.lightBlue'
+    },
+    '&.MuiPickersDay-dayOutsideMonth': {
+      color: 'basic.bismark'
+    }
+  },
+
+  mainWrapper: {
+    position: 'relative'
+  },
+
+  dotsContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'absolute',
+    bottom: 2,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    gap: '3px'
+  },
+
+  dots: {
+    width: { xs: '4px', sm: '4px', md: '5px' },
+    height: { xs: '4px', sm: '4px', md: '5px' },
+    borderRadius: '50%',
+    backgroundColor: 'basic.lightBlue'
+  },
+
+  iconButton: {
+    color: 'basic.lightBlue',
+    ml: 'auto'
+  },
+
+  icon: {
+    width: { xs: '18px', sm: '25px', md: '32px' },
+    height: { xs: '18px', sm: '25px', md: '32px' }
+  },
+
+  calendarHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    mt: '16px',
+    mb: '8px',
+    pl: { xs: '10px', sm: '17px', md: '24px' },
+    pr: { xs: '5px', sm: '10px', md: '12px' }
+  },
+
+  currentMonth: {
+    typography: {
+      xs: TypographyVariantEnum.Button,
+      sm: TypographyVariantEnum.MidTitle,
+      md: TypographyVariantEnum.H6
+    },
+    color: 'basic.lightBlue',
+    textTransform: { xs: 'capitalize' }
+  },
+
+  arrows: {
+    color: 'basic.lightBlue',
+    '& svg': {
+      width: { xs: '20px', sm: '26px', md: '36px' },
+      height: { xs: '20px', sm: '26px', md: '36px' }
+    }
+  }
+}

src/components/calendar/Calendar.tsx

@@ -0,0 +1,112 @@
+import { Box, IconButton, Typography } from '@mui/material'
+import {
+  CalendarPicker,
+  LocalizationProvider,
+  PickersDay,
+  PickersDayProps
+} from '@mui/x-date-pickers'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { useState } from 'react'
+import { styles } from './Calendar.styles'
+import { PickersArrowSwitcher } from '@mui/x-date-pickers/internals'
+import { isSameDay } from 'date-fns'
+import { getFormattedDate } from '~/utils/helper-functions'
+import EditCalendarIcon from '@mui/icons-material/EditCalendar'
+
+const mockedData = [
+  {
+    value: '2024-09-06',
+    count: 2
+  },
+  {
+    value: '2024-09-14',
+    count: 1
+  },
+  {
+    value: '2024-09-19',
+    count: 3
+  }
+]
+
+const Calendar = () => {
+  const [date, setDate] = useState<Date>(new Date())
+
+  const renderDay = (
+    day: Date,
+    _value: Date[],
+    DayComponentProps: PickersDayProps<Date>
+  ) => {
+    const countOfLessonsPerDay = mockedData.find((item) =>
+      isSameDay(new Date(item.value), day)
+    )?.count
+
+    const dotElements = countOfLessonsPerDay ? (
+      <Box sx={styles.dotsContainer}>
+        {Array.from({ length: countOfLessonsPerDay }, (_, index) => index).map(
+          (item) => (
+            <Box key={item} sx={styles.dots} />
+          )
+        )}
+      </Box>
+    ) : null
+
+    const dayElement = (
+      <Box sx={styles.mainWrapper}>
+        <PickersDay
+          {...DayComponentProps}
+          selected={isSameDay(day, new Date())}
+          sx={styles.day}
+        />
+        {dotElements}
+      </Box>
+    )
+
+    return dayElement
+  }
+
+  const calendarElement = (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Box sx={styles.calendarContainer}>
+        <Box sx={styles.calendarHeader}>
+          <Typography sx={styles.currentMonth}>
+            {getFormattedDate({ date, options: { month: 'long' } })}
+          </Typography>
+          <PickersArrowSwitcher
+            componentsProps={{
+              leftArrowButton: {
+                sx: styles.arrows
+              },
+              rightArrowButton: {
+                sx: styles.arrows
+              }
+            }}
+            isLeftDisabled={false}
+            isRightDisabled={false}
+            onLeftClick={() =>
+              setDate(new Date(date?.setMonth(date.getMonth() - 1)))
+            }
+            onRightClick={() =>
+              setDate(new Date(date?.setMonth(date.getMonth() + 1)))
+            }
+          />
+          <IconButton sx={styles.iconButton}>
+            <EditCalendarIcon sx={styles.icon}></EditCalendarIcon>
+          </IconButton>
+        </Box>
+
+        <CalendarPicker
+          date={date}
+          onChange={(newDate) => setDate(newDate || new Date())}
+          readOnly
+          renderDay={renderDay}
+          showDaysOutsideCurrentMonth
+          views={['day']}
+        />
+      </Box>
+    </LocalizationProvider>
+  )
+
+  return calendarElement
+}
+
+export default Calendar

src/pages/tutor-home/TutorHome.tsx

@@ -12,6 +12,7 @@ import ActiveStudentsBlock from '~/components/active-students/ActiveStudentsBloc
 
 import { styles } from '~/pages/tutor-home/TutorHome.styles'
 import { translationKey } from '~/components/find-block/find-student-constants'
+import Calendar from '~/components/calendar/Calendar'
 import TutorSchedule from '~/components/tutor-schedule/TutorSchedule'
 
 const TutorHome = () => {
@@ -34,6 +35,7 @@ const TutorHome = () => {
     <PageWrapper data-testid='tutorHome'>
       <FindBlock translationKey={translationKey} />
       <TutorSchedule />
+      <Calendar />
       <ActiveStudentsBlock />
       <PopularCategories
         description={t('tutorHomePage.popularCategories.description')}