started work on availability-color-selector

client/src/components/CheckboxIcon.tsx

@@ -1,4 +1,4 @@
-import { SwitchProps, useSwitch, VisuallyHidden } from "@nextui-org/react";
+import { SwitchProps, useSwitch, VisuallyHidden } from "@heroui/react";
 import React from "react";
 
 export default function CheckboxIcon(props: SwitchProps) {

client/src/components/Colorselector.tsx

@@ -0,0 +1,58 @@
+import {
+	RadioGroup,
+	RadioProps,
+	useRadio,
+	VisuallyHidden,
+} from "@heroui/react";
+
+export default function ColorSelector() {
+	const colors = [
+		{ value: "Red", tailwind: "red-600" },
+		{ value: "Orange", tailwind: "orange-600" },
+		{ value: "Amber", tailwind: "amber-600" },
+		{ value: "Yellow", tailwind: "yellow-600" },
+		{ value: "Lime", tailwind: "lime-600" },
+		{ value: "Green", tailwind: "green-600" },
+		{ value: "Emerald", tailwind: "emerald-600" },
+		{ value: "Teal", tailwind: "teal-600" },
+		{ value: "Cyan", tailwind: "cyan-600" },
+		{ value: "Sky", tailwind: "sky-600" },
+		{ value: "Blue", tailwind: "blue-600" },
+		{ value: "Indigo", tailwind: "indigo-600" },
+		{ value: "Violet", tailwind: "violet-600" },
+		{ value: "Purple", tailwind: "purple-600" },
+		{ value: "Fuchsia", tailwind: "fuchsia-600" },
+		{ value: "Pink", tailwind: "pink-600" },
+	];
+
+	return (
+		<RadioGroup classNames={{ wrapper: "grid grid-cols-4" }}>
+			{colors.map((color) => (
+				<ColorRadio
+					description={color.value}
+					value={color.value}
+					key={color.value}
+					radioColor={`bg-${color.tailwind}`}
+				>
+					<div>{color.value}</div>
+				</ColorRadio>
+			))}
+		</RadioGroup>
+	);
+}
+
+function ColorRadio(props: { radioColor: string } & RadioProps) {
+	const { Component, children, getBaseProps, getInputProps } = useRadio(props);
+
+	return (
+		<Component
+			{...getBaseProps()}
+			className={`aspect-square cursor-pointer rounded-lg border-2 border-default tap-highlight-transparent hover:opacity-70 active:opacity-50 data-[selected=true]:border-primary ${props.radioColor} flex items-center justify-center p-1`}
+		>
+			<VisuallyHidden>
+				<input {...getInputProps()} />
+			</VisuallyHidden>
+			{children}
+		</Component>
+	);
+}

client/src/components/Event/AddEvent.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import EditEvent, { EventSubmitData } from "./EditEvent";
 import { apiCall } from "@/lib";
 import { AddLarge } from "@carbon/icons-react";

client/src/components/Event/EditEvent.tsx

@@ -18,7 +18,7 @@ import {
 	ModalHeader,
 	Spinner,
 	Textarea,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { getTasks, Task } from "@/lib";
 import { EventData } from "@/Zustand";
 

client/src/components/Event/Event.tsx

@@ -2,7 +2,7 @@
 
 import LocalDate from "../LocalDate";
 import { EventData } from "@/Zustand";
-import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
+import { Card, CardBody, CardHeader, Divider } from "@heroui/react";
 import React from "react";
 
 export default function Event({