reanimate Switches

components/Switch.tsx

@@ -1,25 +1,41 @@
+import type { ChangeEventHandler } from 'react';
+
 export interface SwitchProps {
 	label: string;
 	value: boolean;
-	toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	toggleAction: ChangeEventHandler<HTMLInputElement>;
 }
 
+const nonInitialCaps = /(?!^)([A-Z])/g;
+
 export default function Switch({ label, value, toggleAction }: SwitchProps) {
 	return (
 		<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
-			<span className="text-sm capitalize">{label}</span>
+			<span className="text-sm capitalize">{label.replace(nonInitialCaps, ' $1')}</span>
 
 			<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
-				<input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
-				<div
-					className={`block w-8 h-4 rounded-full transition ${
-						value ? 'bg-slate-500' : 'bg-slate-600'
-					}`}
+				<input
+					id={`switch-${label}`}
+					type="checkbox"
+					checked={value}
+					onChange={toggleAction}
+					className="sr-only peer"
 				/>
 				<div
-					className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-all duration-250 ease-out transform
-            ${value ? 'translate-x-4 scale-110' : 'scale-95'}
-            ${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
+					className={`
+						block w-8 h-4 rounded-full
+						transition-colors duration-200 ease-in
+						bg-slate-600 peer-checked:bg-slate-500
+					`}
+				/>
+				<div
+					className={`
+						absolute top-[2px] left-[2px]
+						w-3 h-3 rounded-full
+						transition-all duration-250 ease-out
+						translate-x-0 scale-95 bg-yellow-500
+						peer-checked:translate-x-4 peer-checked:scale-110 peer-checked:bg-yellow-400
+					`}
 				/>
 			</div>
 		</label>