94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import { useState } from "react";
|
|
import { Container, Popover, useMantineTheme } from "@mantine/core";
|
|
|
|
import type { CalendarEvent } from "@homarr/integrations/types";
|
|
|
|
import { CalendarEventList } from "./calendar-event-list";
|
|
|
|
interface CalendarDayProps {
|
|
date: Date;
|
|
events: CalendarEvent[];
|
|
disabled: boolean;
|
|
}
|
|
|
|
export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
|
|
const [opened, setOpend] = useState(false);
|
|
const { primaryColor } = useMantineTheme();
|
|
|
|
return (
|
|
<Popover
|
|
position="bottom"
|
|
withArrow
|
|
withinPortal
|
|
radius="lg"
|
|
shadow="sm"
|
|
transitionProps={{
|
|
transition: "pop",
|
|
}}
|
|
onChange={setOpend}
|
|
opened={opened}
|
|
disabled={disabled}
|
|
>
|
|
<Popover.Target>
|
|
<Container
|
|
h="100%"
|
|
w="100%"
|
|
p={0}
|
|
m={0}
|
|
bd={`1cqmin solid ${opened && !disabled ? primaryColor : "transparent"}`}
|
|
style={{
|
|
alignContent: "center",
|
|
borderRadius: "3.5cqmin",
|
|
cursor: disabled ? "default" : "pointer",
|
|
}}
|
|
onClick={() => {
|
|
if (disabled) return;
|
|
|
|
setOpend((prev) => !prev);
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
textAlign: "center",
|
|
whiteSpace: "nowrap",
|
|
fontSize: "5cqmin",
|
|
lineHeight: "5cqmin",
|
|
paddingTop: "1.25cqmin",
|
|
}}
|
|
>
|
|
{date.getDate()}
|
|
</div>
|
|
<NotificationIndicator events={events} />
|
|
</Container>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<CalendarEventList events={events} />
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
interface NotificationIndicatorProps {
|
|
events: CalendarEvent[];
|
|
}
|
|
|
|
const NotificationIndicator = ({ events }: NotificationIndicatorProps) => {
|
|
const notificationEvents = [...new Set(events.map((event) => event.links[0]?.notificationColor))].filter(String);
|
|
return (
|
|
<Container h="0.7cqmin" w="80%" display="flex" p={0} style={{ flexDirection: "row", justifyContent: "center" }}>
|
|
{notificationEvents.map((notificationEvent) => {
|
|
return (
|
|
<Container
|
|
key={notificationEvent}
|
|
bg={notificationEvent}
|
|
h="100%"
|
|
mx="0.25cqmin"
|
|
p={0}
|
|
style={{ flex: 1, borderRadius: "1000px" }}
|
|
/>
|
|
);
|
|
})}
|
|
</Container>
|
|
);
|
|
};
|