ee4c6ce699
* feat(ui): add time and location to popup * feat(ui): memoize meeting times * feat(ui): remove resizing * feat(ui): add no select to copy course id button * feat(ui): complete update to popup and course blocks * chore: update settings page * chore: fix types * fix(ui): update spacing, padding, and remove last updated section * chore: fix type issues * fix(ui): update borders to offwhite/50 * fix(ui): apply proper offwhite styling * fix(ui): add unique key to async courses in bottom bar
71 lines
3.5 KiB
TypeScript
71 lines
3.5 KiB
TypeScript
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react';
|
|
import { CaretDown, CaretUp } from '@phosphor-icons/react';
|
|
import Text from '@views/components/common/Text/Text';
|
|
import useSchedules from '@views/hooks/useSchedules';
|
|
import React from 'react';
|
|
|
|
/**
|
|
* Props for the Dropdown component.
|
|
*/
|
|
export type ScheduleDropdownProps = {
|
|
defaultOpen?: boolean;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
/**
|
|
* This is a reusable dropdown component that can be used to toggle the visiblity of information
|
|
*/
|
|
export default function ScheduleDropdown({ defaultOpen, children }: ScheduleDropdownProps) {
|
|
const [activeSchedule] = useSchedules();
|
|
|
|
return (
|
|
<div className='border border-ut-offwhite/50 rounded bg-white'>
|
|
<Disclosure defaultOpen={defaultOpen}>
|
|
{({ open }) => (
|
|
<>
|
|
<DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
|
|
<div className='flex-1'>
|
|
<Text as='div' variant='h3' className='w-100% text-ut-burntorange normal-case!'>
|
|
{activeSchedule ? activeSchedule.name : 'Schedule'}
|
|
</Text>
|
|
<div className='flex gap-2.5 text-theme-black leading-[75%]!'>
|
|
<div className='flex gap-1.25'>
|
|
<Text variant='h4'>{activeSchedule ? activeSchedule.hours : 0}</Text>
|
|
<Text variant='h4' className='font-all-small-caps!'>
|
|
{activeSchedule.hours === 1 ? 'HOUR' : 'HOURS'}
|
|
</Text>
|
|
</div>
|
|
<div className='flex gap-1.25'>
|
|
<Text variant='h4'>{activeSchedule ? activeSchedule.courses.length : 0}</Text>
|
|
<Text variant='h4' className='font-all-small-caps!'>
|
|
{activeSchedule.courses.length === 1 ? 'COURSE' : 'COURSES'}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Text className='text-ut-burntorange text-2xl! font-normal!'>
|
|
{open ? <CaretDown weight='fill' /> : <CaretUp weight='fill' />}
|
|
</Text>
|
|
</DisclosureButton>
|
|
|
|
<Transition
|
|
as='div'
|
|
className='overflow-hidden'
|
|
enter='transition-[max-height,opacity,padding] duration-300 ease-in-out-expo'
|
|
enterFrom='max-h-0 opacity-0 p-0.5'
|
|
enterTo='max-h-[440px] opacity-100 p-0'
|
|
leave='transition-[max-height,opacity,padding] duration-300 ease-in-out-expo'
|
|
leaveFrom='max-h-[440px] opacity-100 p-0'
|
|
leaveTo='max-h-0 opacity-0 p-0.5'
|
|
>
|
|
<div className='px-3.5 pb-2.5 pt-2'>
|
|
<DisclosurePanel>{children}</DisclosurePanel>
|
|
</div>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
</div>
|
|
);
|
|
}
|