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

dropdown and calendar schedules storybook

Browse Source
This commit is contained in:
Casey Charleston
2024-02-17 18:35:17 -06:00
parent 141f5cc70e
commit 51b6799d73
4 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/components/common/CalendarSchedules/CalendarSchedules.tsx
View File

@@ -16,9 +16,7 @@ export function CalendarSchedules(props: Props) {
const [schedules, setSchedules] = useState(props.dummySchedules || []);
const scheduleComponents = schedules.map((schedule, index) => (
<div onClick={() => setActiveScheduleIndex(index)}>
<ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
</div>
));
return (

22
src/views/components/common/ScheduleListItem/ScheduleListItem.tsx
View File

@@ -1,36 +1,38 @@
import clsx from 'clsx';
import React from 'react';
import DropdownDrag from '~icons/material-symbols/drag-indicator';
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
import Text from '../Text/Text';
export type Props = {
style?: React.CSSProperties;
active?: boolean;
name: string;
dragHandleProps?: any;
};
/**
* This is a reusable dropdown component that can be used to toggle the visiblity of information
*/
export default function ScheduleListItem(props: Props) {
const { dragHandleProps } = props;
console.log(props);
return (
<div style={{ ...props.style }} className='items-center'>
<li
className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'
>
<li className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'>
<div className='group flex justify-center'>
<DropdownDrag className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
<div
className='flex cursor-move items-center self-stretch rounded rounded-r-0'
{...dragHandleProps}
>
<DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
</div>
<div className='inline-flex items-center justify-center gap-1.5'>
<div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
<div
className={clsx(
'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',
{
'scale-0! opacity-0 ease-in-out! duration-200!': !props.active
'scale-0! opacity-0 ease-in-out! duration-200!': !props.active,
}
)}
/>