started "real work"

client/src/components/CheckboxIcon.tsx

@@ -0,0 +1,33 @@
+import { SwitchProps, useSwitch, VisuallyHidden } from "@nextui-org/react";
+import React from "react";
+
+export default function CheckboxIcon(props: SwitchProps) {
+	const {
+		Component,
+		slots,
+		isSelected,
+		getBaseProps,
+		getInputProps,
+		getWrapperProps,
+	} = useSwitch(props);
+
+	return (
+		<Component {...getBaseProps()}>
+			<VisuallyHidden>
+				<input {...getInputProps()} />
+			</VisuallyHidden>
+			<div
+				{...getWrapperProps()}
+				className={slots.wrapper({
+					class: [
+						"h-8 w-8",
+						"flex items-center justify-center",
+						"rounded-lg bg-default-100 hover:bg-default-200",
+					],
+				})}
+			>
+				{isSelected ? props.startContent : props.endContent}
+			</div>
+		</Component>
+	);
+}

client/src/components/Event/AddEvent.tsx

@@ -1,18 +1,19 @@
 import { useState } from "react";
 import { Add } from "@carbon/icons-react";
 import zustand, { EventData, Task, Tasks } from "../../Zustand";
-import { Button } from "@nextui-org/button";
-import { Checkbox, CheckboxGroup } from "@nextui-org/checkbox";
-import { DatePicker } from "@nextui-org/date-picker";
 import { getLocalTimeZone, now, ZonedDateTime } from "@internationalized/date";
-import { Textarea } from "@nextui-org/input";
 import {
+	Button,
+	Checkbox,
+	CheckboxGroup,
+	DatePicker,
 	Modal,
 	ModalBody,
 	ModalContent,
 	ModalFooter,
 	ModalHeader,
-} from "@nextui-org/modal";
+	Textarea,
+} from "@nextui-org/react";
 
 interface state {
 	date: ZonedDateTime;

client/src/components/Event/Event.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { Card, CardBody, CardHeader } from "@nextui-org/card";
-import { Divider } from "@nextui-org/divider";
 import LocalDate from "../LocalDate";
 import { EventData } from "@/Zustand";
+import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
 import React from "react";
 
 export default function Event({
@@ -27,7 +26,6 @@ export default function Event({
 						options={{
 							dateStyle: "short",
 							timeStyle: "short",
-							timeZone: "Europe/Berlin", // TODO: check with actual backend
 						}}
 					>
 						{event.date}

client/src/components/LocalDate.tsx

@@ -1,7 +1,7 @@
 "use local";
 
 import { DateFormatter } from "@/Zustand";
-import { parseZonedDateTime } from "@internationalized/date";
+import { getLocalTimeZone, parseDateTime } from "@internationalized/date";
 import { useLocale } from "@react-aria/i18n";
 
 export default function LocalDate(props: {
@@ -13,7 +13,9 @@ export default function LocalDate(props: {
 
 	return (
 		<span className={props.className}>
-			{formatter.format(parseZonedDateTime(props.children).toDate())}
+			{formatter.format(
+				parseDateTime(props.children).toDate(getLocalTimeZone()),
+			)}
 		</span>
 	);
 }