Add OSD and Payload configuration components with toggle functionality

This commit is contained in:
2025-12-18 13:38:27 +00:00
parent b79da7048e
commit b328d25bc7
8 changed files with 190 additions and 9 deletions

View File

@@ -0,0 +1,22 @@
import { Field } from "formik";
type PayloadOptionsToggleProps = {
label: string;
value: string;
};
const PayloadOptionsToggle = ({ label, value }: PayloadOptionsToggleProps) => {
return (
<label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
<span className="text-lg">{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 PayloadOptionsToggle;