42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { UserSchedule } from '@shared/types/UserSchedule';
|
|
import React, { useEffect, useState } from 'react';
|
|
import AddSchedule from '~icons/material-symbols/add';
|
|
import List from '../List/List';
|
|
import ScheduleListItem from '../ScheduleListItem/ScheduleListItem';
|
|
import Text from '../Text/Text';
|
|
|
|
export type Props = {
|
|
style?: React.CSSProperties;
|
|
dummySchedules?: UserSchedule[];
|
|
dummyActiveIndex?: number;
|
|
};
|
|
|
|
export function CalendarSchedules(props: Props) {
|
|
const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
|
|
const [schedules, setSchedules] = useState(props.dummySchedules || []);
|
|
|
|
let scheduleComponents = schedules.map((schedule, index) => (
|
|
<div onClick={() => setActiveScheduleIndex(index)}>
|
|
<ScheduleListItem
|
|
active={index === activeScheduleIndex}
|
|
name={schedule.name}
|
|
/>
|
|
</div>
|
|
));
|
|
|
|
return (
|
|
<div style={{ ...props.style }} className='items-center'>
|
|
<div className='m0 m-b-2 w-full flex justify-between'>
|
|
<Text variant='h3'>MY SCHEDULES</Text>
|
|
<div className='cursor-pointer items-center justify-center btn-transition -ml-1.5 hover:text-zinc-400'>
|
|
<Text variant='h3'>
|
|
<AddSchedule />
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
|
|
<List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={0} listWidth={240} />
|
|
</div>
|
|
);
|
|
}
|