started work on availability-color-selector

client/src/app/Footer.tsx

@@ -3,7 +3,7 @@
 import { usePathname } from "next/navigation";
 import React from "react";
 import { SiteLink } from "./layout";
-import { Divider, Link } from "@nextui-org/react";
+import { Divider, Link } from "@heroui/react";
 
 export default function Footer({ sites }: { sites: SiteLink[] }) {
 	const pathname = usePathname();

client/src/app/Header.tsx

@@ -18,7 +18,7 @@ import {
 	NavbarMenuToggle,
 	Tab,
 	Tabs,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import zustand from "@/Zustand";
 import { SiteLink } from "./layout";
 import React, { useEffect, useState } from "react";

client/src/app/Main.tsx

@@ -2,7 +2,7 @@
 
 import { apiCall } from "@/lib";
 import zustand from "@/Zustand";
-import { Spinner } from "@nextui-org/react";
+import { Spinner } from "@heroui/react";
 import { usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 

client/src/app/Overview.tsx

@@ -3,7 +3,7 @@
 import { Add } from "@carbon/icons-react";
 import { useState } from "react";
 import AddEvent from "../components/Event/AddEvent";
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 
 export default function EventVolunteer() {
 	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);

client/src/app/account/page.tsx

@@ -9,7 +9,7 @@ import {
 	CardHeader,
 	Form,
 	Input,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { FormEvent, useState } from "react";
 
 export default function Account() {

client/src/app/admin/AddUser.tsx

@@ -9,7 +9,7 @@ import {
 	ModalContent,
 	ModalFooter,
 	ModalHeader,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { FormEvent, useState } from "react";
 
 export default function AddUser(props: {

client/src/app/admin/Availabilities.tsx

@@ -0,0 +1,9 @@
+import ColorSelector from "@/components/Colorselector";
+
+export default function Availabilities() {
+	return (
+		<div>
+			<ColorSelector />
+		</div>
+	);
+}

client/src/app/admin/EditUser.tsx

@@ -14,7 +14,7 @@ import {
 	ModalContent,
 	ModalFooter,
 	ModalHeader,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { FormEvent, useEffect, useState } from "react";
 
 export default function EditUser(props: {

client/src/app/admin/Users.tsx

@@ -10,7 +10,7 @@ import {
 	TableHeader,
 	TableRow,
 	Tooltip,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useAsyncList } from "@react-stately/data";
 import { FormEvent, useState } from "react";
 import AddUser from "./AddUser";

client/src/app/admin/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { Tab, Tabs } from "@nextui-org/react";
+import { Tab, Tabs } from "@heroui/react";
 import Users from "./Users";
+import Availabilities from "./Availabilities";
 
 export default function AdminDashboard() {
 	return (
@@ -11,7 +12,7 @@ export default function AdminDashboard() {
 					<Users />
 				</Tab>
 				<Tab title="Tasks">Tasks</Tab>
-				<Tab title="Availabilities">Availabilities</Tab>
+				<Tab title="Availabilities"><Availabilities /></Tab>
 			</Tabs>
 		</div>
 	);

client/src/app/assignments/page.tsx

@@ -34,7 +34,7 @@ import {
 	TableHeader,
 	TableRow,
 	Tooltip,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useAsyncList } from "@react-stately/data";
 import React, { Key, useState } from "react";
 

client/src/app/events/page.tsx

@@ -5,7 +5,7 @@ import Event from "@/components/Event/Event";
 import { apiCall } from "@/lib";
 import zustand, { EventData } from "@/Zustand";
 import { Add } from "@carbon/icons-react";
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import { useEffect, useState } from "react";
 
 export default function Events() {

client/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { NextUIProvider } from "@nextui-org/system";
+import { HeroUIProvider } from "@heroui/system";
 import React from "react";
 import Footer from "./Footer";
 import Header from "./Header";
@@ -57,7 +57,7 @@ export default function RootLayout({
 	return (
 		<html>
 			<body className="bg-background text-foreground antialiased">
-				<NextUIProvider>
+				<HeroUIProvider>
 					<div className="flex min-h-screen flex-col p-4">
 						<header>
 							<Header sites={headerSites} />
@@ -69,7 +69,7 @@ export default function RootLayout({
 							<Footer sites={footerSites} />
 						</footer>
 					</div>
-				</NextUIProvider>
+				</HeroUIProvider>
 			</body>
 		</html>
 	);

client/src/app/login/page.tsx

@@ -8,7 +8,7 @@ import {
 	ViewOffFilled,
 	WarningHexFilled,
 } from "@carbon/icons-react";
-import { Alert, Button, Form, Input } from "@nextui-org/react";
+import { Alert, Button, Form, Input } from "@heroui/react";
 import { useRouter } from "next/navigation";
 import { FormEvent, useState } from "react";
 

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({