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>
+	);
+}