50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Course } from 'src/shared/types/Course';
|
|
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
|
|
import styles from './CalendarCourseMeeting.module.scss';
|
|
|
|
/**
|
|
* Props for the CalendarCourseMeeting component.
|
|
*/
|
|
export interface CalendarCourseMeetingProps {
|
|
/** The Course that the meeting is for. */
|
|
course: Course;
|
|
/* index into course meeting array to display */
|
|
meetingIdx?: number;
|
|
/** The background color for the course. */
|
|
color: string;
|
|
/** The icon to display on the right side of the course. This is optional. */
|
|
rightIcon?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* `CalendarCourseMeeting` is a functional component that displays a course meeting.
|
|
*
|
|
* @example
|
|
* <CalendarCourseMeeting course={course} meeting={meeting} color="red" rightIcon={<Icon />} />
|
|
*/
|
|
const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
|
|
course,
|
|
meetingIdx,
|
|
}: CalendarCourseMeetingProps) => {
|
|
let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
|
|
return (
|
|
<div className={styles.component}>
|
|
<div className={styles.content}>
|
|
<div className={styles['course-detail']}>
|
|
<div className={styles.course}>
|
|
{course.department} {course.number} - {course.instructors[0].lastName}
|
|
</div>
|
|
<div className={styles['time-and-location']}>
|
|
{`${meeting.getTimeString({ separator: '-', capitalize: true })}${
|
|
meeting.location ? ` - ${meeting.location.building}` : ''
|
|
}`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CalendarCourseMeeting;
|