9c766c2695
* feat(ui): calendar header redesign (WIP) * feat(ui): calendar header redesign (WIP) * chore: use path alias * feat(ui): calendar header redesign * implement Isaiah changes * refactor to prevent unnecessary recreations of resize observer * clean up resize observer and remove unnecessary checks * remove offwhite border from toolbar * merge * complete toolbar * update screenreader functionality * ensure truncation works * merge * finish new toolbar * remove unused screen size hook and .mjs file * add in export button with options * add static size for export button dropdown to prevent shrinking on smaller viewports * change schedule section min width to prevent shrinkage * change text for schedule section to match small caps * fix truncating issues with small caps * remove hidden overflow * add padding * add min height for hader * reserve scrollbar width * tmp * add sticky positioning to header * fix inert prop issue * remove pnpm lock file * fix scrollbar appearing too early * fix vertical stickiness * fix(ui): fix header spacing * fix(ui): update total hours and courses to be h4 * fix(ui): reduce top spacing on header * fix(ui): remove header top padding * fix(ui): stop bottom scrollbar from shifting layout * feat: add functionality to header and fix screenshot spacing * feat: add functionality to header and fix screenshot spacing * fix(ui): allow scrollbar in header and adjust padding to compensate for reserved space * fix(ui): make export options container hug children * fix(ui): add offwhite border * chore: add back lock file from main branch :) * feat(ui): add reduced motion for accessability * feat(ui): change right scrollbar on calendar grid to be hidden when not necessary * chore: make all buttons except export invisible * chore: remove all buttons except export and adjust hardcoded pixel widths for responsiveness --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> Co-authored-by: Razboy20 <razboy20@gmail.com>
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import Text from '@views/components/common/Text/Text';
|
|
import React from 'react';
|
|
|
|
/**
|
|
* Props for ScheduleTotalHoursAndCourses
|
|
*/
|
|
export interface ScheduleTotalHoursAndCoursesProps {
|
|
scheduleName: string;
|
|
totalHours: number;
|
|
totalCourses: number;
|
|
}
|
|
|
|
/**
|
|
* The ScheduleTotalHoursAndCourses as per the Labels and Details Figma section
|
|
*
|
|
* @param scheduleName - The name of the schedule.
|
|
* @param totalHours - The total number of hours.
|
|
* @param totalCourses - The total number of courses.
|
|
* @returns The rendered ScheduleTotalHoursAndCourses component.
|
|
*/
|
|
export default function ScheduleTotalHoursAndCourses({
|
|
scheduleName,
|
|
totalHours,
|
|
totalCourses,
|
|
}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
|
|
return (
|
|
<div className='w-full flex flex-col items-start'>
|
|
<div className='max-w-full overflow-hidden'>
|
|
<Text className='block w-full truncate text-ut-burntorange' variant='h1' as='span'>
|
|
{scheduleName}
|
|
</Text>
|
|
</div>
|
|
<Text variant='h3' as='div' className='flex flex-row items-center gap-2.5 text-theme-black'>
|
|
<Text variant='h4' as='span' className='inline text-theme-black'>
|
|
{totalHours}
|
|
<Text variant='h3' as='span' className='inline text-theme-black font-all-small-caps!'>
|
|
{totalHours === 1 ? 'Hour' : 'Hours'}
|
|
</Text>
|
|
</Text>
|
|
<Text variant='h4' as='span' className='inline text-theme-black'>
|
|
{totalCourses}
|
|
<Text variant='h3' as='span' className='inline text-theme-black font-all-small-caps!'>
|
|
{totalCourses === 1 ? 'Course' : 'Courses'}
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</div>
|
|
);
|
|
}
|