feat: calendar course block component (#75)

src/stories/components/CalendarCourseCell.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Course, Status } from 'src/shared/types/Course';
+import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
+import { CourseSchedule } from 'src/shared/types/CourseSchedule';
+import Instructor from 'src/shared/types/Instructor';
+import CalendarCourseCell from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
+
+const meta = {
+    title: 'Components/Common/CalendarCourseCell',
+    component: CalendarCourseCell,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        course: { control: 'object' },
+        meetingIdx: { control: 'number' },
+        color: { control: 'color' },
+    },
+    render: (args: any) => (
+        <div className="w-45">
+            <CalendarCourseCell {...args} />
+        </div>
+    ),
+} satisfies Meta<typeof CalendarCourseCell>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        course: new Course({
+            uniqueId: 123,
+            number: '311C',
+            fullName: "311C - Bevo's Default Course",
+            courseName: "Bevo's Default Course",
+            department: 'BVO',
+            creditHours: 3,
+            status: Status.WAITLISTED,
+            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+            isReserved: false,
+            url: '',
+            flags: [],
+            schedule: new CourseSchedule({
+                meetings: [
+                    new CourseMeeting({
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        startTime: 480,
+                        endTime: 570,
+                        location: {
+                            building: 'UTC',
+                            room: '123',
+                        },
+                    }),
+                ],
+            }),
+            instructionMode: 'In Person',
+            semester: {
+                year: 2024,
+                season: 'Spring',
+            },
+        }),
+        meetingIdx: 0,
+        color: 'red',
+    },
+};

src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Course, Status } from 'src/shared/types/Course';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import ClosedIcon from '~icons/material-symbols/lock';
+import WaitlistIcon from '~icons/material-symbols/timelapse';
+import CancelledIcon from '~icons/material-symbols/warning';
+import Text from '../Text/Text';
+
+export interface CalendarCourseBlockProps {
+    /** 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;
+}
+
+const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
+    let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
+    let rightIcon: React.ReactNode | null = null;
+    if (course.status === Status.WAITLISTED) {
+        rightIcon = <WaitlistIcon className='h-5 w-5' />;
+    } else if (course.status === Status.CLOSED) {
+        rightIcon = <ClosedIcon className='h-5 w-5' />;
+    } else if (course.status === Status.CANCELLED) {
+        rightIcon = <CancelledIcon className='h-5 w-5' />;
+    }
+
+    return (
+        <div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
+            <div className='flex flex-1 flex-col gap-1'>
+                <Text variant='h1-course' className='leading-[75%]!'>
+                    {course.department} {course.number} - {course.instructors[0].lastName}
+                </Text>
+                <Text variant='h3-course' className='leading-[75%]!'>
+                    {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
+                        meeting.location ? ` – ${meeting.location.building}` : ''
+                    }`}
+                </Text>
+            </div>
+            {rightIcon && (
+                <div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
+                    {rightIcon}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CalendarCourseBlock;