64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import createSchedule from '@pages/background/lib/createSchedule';
|
|
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
|
|
import { Button } from '@views/components/common/Button';
|
|
import List from '@views/components/common/List';
|
|
import ScheduleListItem from '@views/components/common/ScheduleListItem';
|
|
import Text from '@views/components/common/Text/Text';
|
|
import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
|
|
import React from 'react';
|
|
|
|
import AddSchedule from '~icons/material-symbols/add';
|
|
|
|
/**
|
|
* Renders a component that displays a list of schedules.
|
|
*
|
|
* @param props - The component props.
|
|
* @returns The rendered component.
|
|
*/
|
|
export function CalendarSchedules() {
|
|
const [, schedules] = useSchedules();
|
|
|
|
return (
|
|
<div className='min-w-full w-0 items-center'>
|
|
<div className='m0 m-b-2 w-full flex justify-between'>
|
|
<Text variant='h3' className='text-nowrap'>
|
|
MY SCHEDULES
|
|
</Text>
|
|
<Button
|
|
variant='single'
|
|
color='theme-black'
|
|
className='h-fit p-0 btn'
|
|
onClick={() => createSchedule('New Schedule')}
|
|
>
|
|
<AddSchedule className='h-6 w-6' />
|
|
</Button>
|
|
</div>
|
|
<div className='flex flex-col space-y-2.5'>
|
|
<List
|
|
gap={10}
|
|
draggables={schedules}
|
|
itemKey={s => s.id}
|
|
onReordered={reordered => {
|
|
const activeSchedule = getActiveSchedule();
|
|
const activeIndex = reordered.findIndex(s => s.id === activeSchedule.id);
|
|
|
|
// don't care about the promise
|
|
UserScheduleStore.set('schedules', reordered);
|
|
UserScheduleStore.set('activeIndex', activeIndex);
|
|
}}
|
|
>
|
|
{(schedule, handleProps) => (
|
|
<ScheduleListItem
|
|
schedule={schedule}
|
|
onClick={() => {
|
|
switchSchedule(schedule.id);
|
|
}}
|
|
dragHandleProps={handleProps}
|
|
/>
|
|
)}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|