fix: build errors and restructure Calendar page

2024-02-19 18:26:09 -06:00
parent 39947b3694
commit c6a48dd3f6
22 changed files with 69 additions and 40 deletions
--- a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
@@ -0,0 +1,85 @@
+import { Status } from '@shared/types/Course';
+import clsx from 'clsx';
+import React from 'react';
+import { CourseColors, pickFontColor } from 'src/shared/util/colors';
+import ClosedIcon from '~icons/material-symbols/lock';
+import WaitlistIcon from '~icons/material-symbols/timelapse';
+import CancelledIcon from '~icons/material-symbols/warning';
+import Text from '../../common/Text/Text';
+
+export interface CalendarCourseCellProps {
+    courseDeptAndInstr: string;
+    timeAndLocation?: string;
+    status: Status;
+    colors: CourseColors;
+    className?: string;
+}
+
+const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
+    courseDeptAndInstr,
+    timeAndLocation,
+    status,
+    colors,
+    className,
+}: CalendarCourseCellProps) => {
+    let rightIcon: React.ReactNode | null = null;
+    if (status === Status.WAITLISTED) {
+        rightIcon = <WaitlistIcon className='h-5 w-5' />;
+    } else if (status === Status.CLOSED) {
+        rightIcon = <ClosedIcon className='h-5 w-5' />;
+    } else if (status === Status.CANCELLED) {
+        rightIcon = <CancelledIcon className='h-5 w-5' />;
+    }
+
+    // whiteText based on secondaryColor
+    const fontColor = pickFontColor(colors.primaryColor);
+
+    return (
+        <div
+            className={clsx('w-full flex justify-center rounded p-2', fontColor, className)}
+            style={{
+                backgroundColor: colors.primaryColor,
+            }}
+        >
+<<<<<<< HEAD
+            <div className='flex flex-1 flex-col gap-1'>
+                <Text variant='h1-course' className='leading-[75%]!'>
+                    {courseDeptAndInstr}
+                </Text>
+                {timeAndLocation && (
+                    <Text variant='h3-course' className='leading-[75%]!'>
+                        {timeAndLocation}
+=======
+            <div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
+                <Text
+                    variant='h1-course'
+                    className={clsx('-my-0.8 leading-tight', {
+                        truncate: timeAndLocation,
+                    })}
+                >
+                    {courseDeptAndInstr}
+                </Text>
+                {meeting && (
+                    <Text variant='h3-course' className='-mb-0.5'>
+                        {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
+                            meeting.location ? ` – ${meeting.location.building}` : ''
+                        }`}
+>>>>>>> 73fe14e (fix calendar course cell spacing)
+                    </Text>
+                )}
+            </div>
+            {rightIcon && (
+                <div
+                    className='h-fit flex items-center justify-center justify-self-start rounded p-0.5 text-white'
+                    style={{
+                        backgroundColor: colors.secondaryColor,
+                    }}
+                >
+                    {rightIcon}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CalendarCourseBlock;