DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: calendar header formatting and data displaying (#160)

Browse Source
This commit is contained in:
Samuel Gunter
2024-03-13 21:38:40 -05:00
committed by GitHub
parent 61c1e88dcf
commit 5cce1c79fc
16 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
View File

@@ -5,6 +5,8 @@ import Divider from '@views/components/common/Divider/Divider';
import { LogoIcon } from '@views/components/common/LogoIcon';
import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
import Text from '@views/components/common/Text/Text';
import useSchedules from '@views/hooks/useSchedules';
import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
import React from 'react';
@@ -27,9 +29,11 @@ const handleOpenOptions = async (): Promise<void> => {
* @returns The JSX element representing the calendar header.
*/
export default function CalendarHeader(): JSX.Element {
const [activeSchedule] = useSchedules();
return (
<div className='min-h-79px min-w-672px w-full flex px-0 py-5'>
<div className='flex flex-row gap-20'>
<div className='flex flex-row gap-20 w-full'>
<div className='flex gap-10'>
<div className='flex gap-1'>
<Button className='self-center' variant='single' icon={MenuIcon} color='ut-gray' />
@@ -43,13 +47,17 @@ export default function CalendarHeader(): JSX.Element {
</div>
<Divider className='self-center' size='2.5rem' orientation='vertical' />
<div className='flex flex-col self-center'>
<ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
<ScheduleTotalHoursAndCourses
scheduleName={activeSchedule.name}
totalHours={activeSchedule.hours}
totalCourses={activeSchedule.courses.length}
/>
<Text variant='h4' className='text-xs text-gray font-medium leading-normal'>
DATA UPDATED ON: 12:00 AM 02/01/2024
LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
</Text>
</div>
</div>
<div className='flex flex-row items-center justify-end space-x-8'>
<div className='flex flex-row items-center justify-end space-x-8 ml-auto'>
<div className='flex flex-row space-x-4'>
<CourseStatus size='small' status={Status.WAITLISTED} />
<CourseStatus size='small' status={Status.CLOSED} />