gavin
fa352238bb
- Context - sync _tilts_ between participants - shiny cards - reconnect clients - updates Settings - re-animate Switches Co-authored-by: Gavin McDonald <gavinmcdoh@gmail.com> Reviewed-on: #3
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import type { ChangeEventHandler } from 'react';
|
|
|
|
export interface SwitchProps {
|
|
label: string;
|
|
value: boolean;
|
|
toggleAction: ChangeEventHandler<HTMLInputElement>;
|
|
className?: string;
|
|
}
|
|
|
|
const nonInitialCaps = /(?!^)([A-Z])/g;
|
|
|
|
export default function Switch({ label, value, toggleAction, className }: SwitchProps) {
|
|
return (
|
|
<label
|
|
className={`flex items-center justify-between gap-2 w-full cursor-pointer text-yellow-400 hover:text-yellow-300 ${className}`}
|
|
>
|
|
<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
|
|
id={`switch-${label}`}
|
|
type="checkbox"
|
|
checked={value}
|
|
onChange={toggleAction}
|
|
className="sr-only peer"
|
|
/>
|
|
<div
|
|
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>
|
|
);
|
|
}
|