1d8da6579e
* refactor: match popup styles/reduce paint flicker
* fix: useSchedules hook
* feat: popup ✨
* fix: repaint issue on popup body
* fix: initial active schedule
* fix: center justification
* fix: reactivity error
63 lines
2.9 KiB
TypeScript
63 lines
2.9 KiB
TypeScript
import { Disclosure, Transition } from '@headlessui/react';
|
|
import Text from '@views/components/common/Text/Text';
|
|
import useSchedules from '@views/hooks/useSchedules';
|
|
import React from 'react';
|
|
|
|
import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
|
|
import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
|
|
|
|
/**
|
|
* Props for the Dropdown component.
|
|
*/
|
|
export type Props = {
|
|
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(props: Props) {
|
|
const [activeSchedule] = useSchedules();
|
|
|
|
return (
|
|
<div className='border border-ut-offwhite rounded border-solid bg-white'>
|
|
<Disclosure defaultOpen={props.defaultOpen}>
|
|
{({ open }) => (
|
|
<>
|
|
<Disclosure.Button 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='h4' className='mb-1 w-100% text-ut-burntorange'>
|
|
{(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
|
|
</Text>
|
|
<p className='-mb-0.5'>
|
|
<Text variant='h3' className='text-theme-black leading-[75%]!'>
|
|
{activeSchedule ? activeSchedule.hours : 0} HOURS
|
|
</Text>
|
|
<Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
|
|
{activeSchedule ? activeSchedule.courses.length : 0} Courses
|
|
</Text>
|
|
</p>
|
|
</div>
|
|
<Text className='text-2xl text-ut-burntorange font-normal'>
|
|
{open ? <DropdownArrowDown /> : <DropdownArrowUp />}
|
|
</Text>
|
|
</Disclosure.Button>
|
|
|
|
<Transition
|
|
className='contain-paint max-h-55 origin-top overflow-auto transition-all duration-400 ease-in-out-expo'
|
|
enterFrom='transform scale-98 opacity-0 max-h-0!'
|
|
enterTo='transform scale-100 opacity-100 max-h-55'
|
|
leave='ease-out-expo'
|
|
leaveFrom='transform scale-100 opacity-100 max-h-55'
|
|
leaveTo='transform scale-98 opacity-0 max-h-0!'
|
|
>
|
|
<Disclosure.Panel className='px-3.5 pb-2.5 pt-2'>{props.children}</Disclosure.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
</div>
|
|
);
|
|
}
|