28 lines
972 B
TypeScript
28 lines
972 B
TypeScript
|
import { Field } from "formik";
|
||
|
|
|
||
|
|
type OSDFieldToggleProps = {
|
||
|
|
value: string;
|
||
|
|
label: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const OSDFieldToggle = ({ value, label }: OSDFieldToggleProps) => {
|
||
|
|
const spacesWords = (label: string) => {
|
||
|
|
if (label.includes("VRM")) return label.replace("VRM", " VRM");
|
||
|
|
return label.replace(/([A-Z])/g, " $1").trim();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
|
||
|
|
<span className="text-lg">{spacesWords(label)}</span>
|
||
|
|
<Field id={value} type="checkbox" name={value} className="sr-only peer" />
|
||
|
|
<div
|
||
|
|
className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-['']
|
||
|
|
after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition
|
||
|
|
after:duration-300 peer-checked:after:translate-x-5"
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default OSDFieldToggle;
|