75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import { MediaList } from './MediaList';
|
|
import { getBgColorByDateAndTheme } from './bg-calculator';
|
|
import { MediasType } from './type';
|
|
|
|
interface CalendarDayProps {
|
|
date: Date;
|
|
medias: MediasType;
|
|
}
|
|
|
|
export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
|
|
const [opened, { close, open }] = useDisclosure(false);
|
|
|
|
if (medias.totalCount === 0) {
|
|
return <div>{date.getDate()}</div>;
|
|
}
|
|
|
|
return (
|
|
<Popover
|
|
position="bottom"
|
|
withArrow
|
|
withinPortal
|
|
radius="lg"
|
|
shadow="sm"
|
|
transitionProps={{
|
|
transition: 'pop',
|
|
}}
|
|
onClose={close}
|
|
opened={opened}
|
|
>
|
|
<Popover.Target>
|
|
<Box
|
|
onClick={open}
|
|
sx={(theme) => ({
|
|
margin: 5,
|
|
backgroundColor: getBgColorByDateAndTheme(theme.colorScheme, date),
|
|
})}
|
|
w="100%"
|
|
>
|
|
<DayIndicator color="red" position="bottom-start" medias={medias.books}>
|
|
<DayIndicator color="yellow" position="top-start" medias={medias.movies}>
|
|
<DayIndicator color="blue" position="top-end" medias={medias.tvShows}>
|
|
<DayIndicator color="green" position="bottom-end" medias={medias.musics}>
|
|
<div>{date.getDate()}</div>
|
|
</DayIndicator>
|
|
</DayIndicator>
|
|
</DayIndicator>
|
|
</DayIndicator>
|
|
</Box>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<MediaList medias={medias} />
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
interface DayIndicatorProps {
|
|
color: string;
|
|
medias: any[];
|
|
children: JSX.Element;
|
|
position: IndicatorProps['position'];
|
|
}
|
|
|
|
const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps) => {
|
|
if (medias.length === 0) return children;
|
|
|
|
return (
|
|
<Indicator size={10} withBorder offset={-5} color={color} position={position}>
|
|
{children}
|
|
</Indicator>
|
|
);
|
|
};
|