Your schedule (#2538)

* Your schedule

* hot fix

* hot fix read only

src/components/tutor-schedule/TutorSchedule.styles.ts

@@ -0,0 +1,38 @@
+import { TypographyVariantEnum } from '~/types'
+
+export const styles = {
+  generalContainer: {
+    maxWidth: '500px',
+    minHeight: '500px',
+    m: { xs: '87px auto 0px', md: '87px 0px 0px' }
+  },
+
+  cardWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: { xs: '20px', md: '35px' },
+    mt: '25px'
+  },
+
+  textContainer: {
+    ml: { xs: '20px', sm: '45px' }
+  },
+  sectionTitle: {
+    typography: TypographyVariantEnum.H5,
+    color: 'basic.lightBlue'
+  },
+
+  sectionSubtitle: {
+    typography: TypographyVariantEnum.Subtitle1,
+    color: 'basic.blueGray'
+  },
+
+  btn: {
+    color: 'basic.darkGrey',
+    typography: TypographyVariantEnum.Body1,
+    textDecoration: 'underline',
+    display: 'block',
+    m: 'auto',
+    mt: { xs: '20px', md: '35px' }
+  }
+}

src/components/tutor-schedule/TutorSchedule.tsx

@@ -0,0 +1,54 @@
+import { Box, Button, Typography } from '@mui/material'
+import { styles } from '~/components/tutor-schedule/TutorSchedule.styles'
+import TutorScheduleCard from './TutorScheduleCard'
+import { ITutorScheduleItem } from './types'
+
+const items: ITutorScheduleItem[] = [
+  {
+    time: '18:00-19:30 Thu',
+    firstName: 'Tomas',
+    lastName: 'Wang',
+    subject: 'Computer science: ',
+    chapter: 'python',
+    price: 80
+  },
+
+  {
+    time: '12:45-14:45 Thu',
+    firstName: 'Bella',
+    lastName: 'Hadid',
+    subject: 'Computer science: ',
+    chapter: 'python',
+    price: 140
+  },
+
+  {
+    time: '18:00-19:30 Thu',
+    firstName: 'Bella',
+    lastName: 'Hadid',
+    subject: 'Math: ',
+    chapter: 'linear algebra',
+    price: 90
+  }
+]
+
+function TutorSchedule() {
+  return (
+    <Box sx={styles.generalContainer}>
+      <Box sx={styles.textContainer}>
+        <Typography sx={styles.sectionTitle}>Your schedule</Typography>
+        <Typography sx={styles.sectionSubtitle}>Upcoming classes</Typography>
+      </Box>
+      <Box sx={styles.cardWrapper}>
+        {items.map((item) => (
+          <TutorScheduleCard item={item} key={item.lastName} />
+        ))}
+      </Box>
+      <Button sx={styles.btn} variant='text'>
+        All scheduled classes
+      </Button>
+    </Box>
+  )
+}
+
+export default TutorSchedule

src/components/tutor-schedule/TutorScheduleCard.styles.tsx

@@ -0,0 +1,71 @@
+import { TypographyVariantEnum } from '~/types'
+
+export const styles = {
+  cardContainer: {
+    display: 'flex',
+    width: '100%',
+    height: { xs: 'fit-content', sm: '97px' },
+    backgroundColor: 'basic.white',
+    borderRadius: '16px',
+    boxShadow: `0px 9px 12px 1px #90A4AE24, 
+    0px 3px 16px 2px #90A4AE1F, 
+    0px 5px 6px -3px #90A4AE33`
+  },
+
+  avatar: {
+    m: { xs: '11px 0px 11px 5px', sm: '11px 0px 11px 13px' },
+    width: { xs: '50px', sm: '75px' },
+    height: { xs: '50px', sm: '75px' }
+  },
+  mainInfoContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    ml: '9px'
+  },
+
+  time: {
+    color: 'basic.blueGray',
+    mt: '11px',
+    typography: TypographyVariantEnum.Subtitle2
+  },
+
+  priceAndMessage: {
+    display: 'flex',
+    flexDirection: 'column',
+    m: { xs: '7px 10px 7px auto', sm: '7px 20px 7px auto' },
+    alignItems: 'flex-end',
+    gap: '20px',
+    '& p': {
+      typography: {
+        xs: TypographyVariantEnum.Subtitle2,
+        sm: TypographyVariantEnum.H6
+      },
+      fontWeight: { xs: '600' },
+      color: 'basic.lightBlue',
+      '& span': {
+        typography: {
+          xs: TypographyVariantEnum.Caption,
+          sm: TypographyVariantEnum.Subtitle1
+        },
+        color: '#basic.grey'
+      }
+    }
+  },
+
+  subject: {
+    typography: {
+      xs: TypographyVariantEnum.Caption,
+      sm: TypographyVariantEnum.Body2
+    },
+    color: 'basic.lightBlue'
+  },
+
+  userName: {
+    typography: {
+      xs: TypographyVariantEnum.Subtitle1,
+      sm: TypographyVariantEnum.H6
+    },
+    fontWeight: { xs: 500 },
+    color: 'basic.lightBlue'
+  }
+}

src/components/tutor-schedule/TutorScheduleCard.tsx

@@ -0,0 +1,34 @@
+import { Box, Typography } from '@mui/material'
+import AvatarIcon from '../avatar-icon/AvatarIcon'
+import MessageIcon from '@mui/icons-material/Message'
+import { styles } from './TutorScheduleCard.styles'
+import { ITutorScheduleItem } from './types'
+
+function TutorScheduleCard({ item }: Readonly<{ item: ITutorScheduleItem }>) {
+  return (
+    <Box sx={styles.cardContainer}>
+      <AvatarIcon
+        firstName={item.firstName}
+        lastName={item.lastName}
+        sx={styles.avatar}
+      />
+      <Box sx={styles.mainInfoContainer}>
+        <Typography sx={styles.time}>{item.time}</Typography>
+        <Typography sx={styles.userName}>
+          {item.firstName} {item.lastName}
+        </Typography>
+        <Typography sx={styles.subject}>
+          {item.subject}
+          {item.chapter}
+        </Typography>
+      </Box>
+      <Box sx={styles.priceAndMessage}>
+        <Typography>
+          {item.price} UAH <Typography component='span'>/hour</Typography>
+        </Typography>
+        <MessageIcon />
+      </Box>
+    </Box>
+  )
+}
+export default TutorScheduleCard

src/components/tutor-schedule/types.ts

@@ -0,0 +1,8 @@
+export interface ITutorScheduleItem {
+  time: string
+  firstName: string
+  lastName: string
+  subject: string
+  chapter: string
+  price: number
+}

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 TutorSchedule from '~/components/tutor-schedule/TutorSchedule'
 
 const TutorHome = () => {
   const { t } = useTranslation()
@@ -32,6 +33,7 @@ const TutorHome = () => {
   return (
     <PageWrapper data-testid='tutorHome'>
       <FindBlock translationKey={translationKey} />
+      <TutorSchedule />
       <ActiveStudentsBlock />
       <PopularCategories
         description={t('tutorHomePage.popularCategories.description')}