index.tsx (1133B)
1 import { Box, Paper } from '@mui/material'; 2 import styled from '@mui/system/styled'; 3 import { memo } from 'react'; 4 5 import { SCHOOL_TIMES } from 'common/constant'; 6 7 import { Event } from './Event'; 8 import Lesson from './Lesson'; 9 10 import type { DayTimetable } from '../../types'; 11 12 type Props = { 13 timetable: DayTimetable; 14 }; 15 16 const List = styled('ul')({ 17 margin: 0, 18 padding: 0, 19 listStyle: 'none', 20 }); 21 22 function Lessons({ timetable }: Props) { 23 return ( 24 <Box 25 elevation={2} 26 sx={(theme) => ({ 27 boxSizing: 'border-box', 28 width: '90%', 29 marginX: 'auto', 30 marginY: 0.5, 31 [theme.breakpoints.up('xs')]: { p: 2 }, 32 [theme.breakpoints.up('sm')]: { p: 4, py: 3 }, 33 })} 34 component={Paper} 35 > 36 {!!timetable.event && <Event event={timetable.event} />} 37 <List> 38 {SCHOOL_TIMES.map((st) => { 39 return ( 40 <Lesson 41 date={new Date(timetable.date)} 42 period={st} 43 courses={timetable[`period${st}`]?.courses ?? []} 44 basis={timetable[`period${st}`]?.basis ?? null} 45 key={`${timetable.date}/${st}`} 46 /> 47 ); 48 })} 49 </List> 50 </Box> 51 ); 52 } 53 54 export default memo(Lessons);