chore: remove unused components
(and duplicated calendar components)
This commit is contained in:
Razboy20
@@ -1,53 +0,0 @@
|
||||
import type { Course } from '@shared/types/Course';
|
||||
import { Status } from '@shared/types/Course';
|
||||
import type { CourseMeeting } from '@shared/types/CourseMeeting';
|
||||
import React from 'react';
|
||||
|
||||
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;
|
||||
@@ -1,94 +0,0 @@
|
||||
@use 'sass:color';
|
||||
@use 'src/views/styles/colors.module.scss';
|
||||
|
||||
.dayLabelContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 13px;
|
||||
min-width: 40px;
|
||||
min-height: 13px;
|
||||
padding-bottom: 15px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.calendarGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(13, 1fr);
|
||||
}
|
||||
|
||||
.calendarRow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
// display: grid;
|
||||
// grid-template-columns: auto repeat(5, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.day {
|
||||
gap: 5px;
|
||||
color: colors.$burnt_orange;
|
||||
text-align: center;
|
||||
font-size: 14.22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.timeAndGrid {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.timeColumn {
|
||||
display: flex;
|
||||
min-height: 573px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex: 1 0 0;
|
||||
border-radius: var(--border-radius-none, 0px);
|
||||
}
|
||||
|
||||
.timeBlock {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 40.279px;
|
||||
min-width: 50px;
|
||||
max-width: 50px;
|
||||
min-height: 40px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.timeLabelContainer {
|
||||
display: flex;
|
||||
max-height: 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 17px;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
border-radius: var(--border-radius-none, 0px);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1A2024;
|
||||
text-align: left;
|
||||
height: 6.6px;
|
||||
align-self: stretch;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
/* Type scale/small */
|
||||
font-family: "Roboto Flex";
|
||||
font-size: 14.22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
import { DAY_MAP } from '@shared/types/CourseMeeting';
|
||||
import React from 'react';
|
||||
|
||||
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
|
||||
import styles from './CalendarGrid.module.scss';
|
||||
|
||||
const daysOfWeek = Object.values(DAY_MAP).filter(d => d !== 'Saturday' && d !== 'Sunday');
|
||||
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
|
||||
const grid = Array.from({ length: 5 }, () =>
|
||||
Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
|
||||
);
|
||||
|
||||
/**
|
||||
* Grid of CalendarGridCell components forming the user's course schedule calendar view
|
||||
* @param props
|
||||
*/
|
||||
const Calendar: React.FC = props => (
|
||||
<div className={styles.calendar}>
|
||||
<div className={styles.dayLabelContainer}>
|
||||
{/* Empty cell in the top-left corner */}
|
||||
<div className={styles.day} />
|
||||
{/* Displaying day labels */}
|
||||
{daysOfWeek.map(day => (
|
||||
<div key={day} className={styles.day}>
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Displaying the rest of the calendar */}
|
||||
<div className={styles.timeAndGrid}>
|
||||
<div className={styles.timeColumn}>
|
||||
{hoursOfDay.map(hour => (
|
||||
<div key={hour} className={styles.timeBlock}>
|
||||
<div className={styles.timeLabelContainer}>
|
||||
<p>
|
||||
{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.calendarGrid}>{grid.map((row, rowIndex) => row)}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Calendar;
|
||||
@@ -1,18 +0,0 @@
|
||||
.calendarCell {
|
||||
display: flex;
|
||||
width: 165px;
|
||||
height: 52.231px;
|
||||
min-width: 45px;
|
||||
min-height: 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
.hourLine {
|
||||
width: 165px;
|
||||
height: 1px;
|
||||
border-radius: var(--border-radius-none, 0px);
|
||||
background: rgba(218, 220, 224, 0.25);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import styles from './CalendarGridCell.module.scss';
|
||||
|
||||
/**
|
||||
* Component representing each 1 hour time block of a calendar
|
||||
* @param props
|
||||
*/
|
||||
const CalendarCell: React.FC = props => (
|
||||
<div className={styles.calendarCell}>
|
||||
<div className={styles.hourLine} />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default CalendarCell;
|
||||
Reference in New Issue
Block a user