31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
type ModemToggleProps = {
|
|
showSettings: boolean;
|
|
onShowSettings: (showSettings: boolean) => void;
|
|
};
|
|
|
|
const ModemToggle = ({ showSettings, onShowSettings }: ModemToggleProps) => {
|
|
return (
|
|
<div className=" text-xl items-center m-2">
|
|
<label className="flex flex-row space-x-2 items-center w-[70%] md:w-[50%]">
|
|
<span>Automatically set</span>
|
|
<input
|
|
name="advancedSettings"
|
|
type="checkbox"
|
|
checked={showSettings}
|
|
onChange={(e) => onShowSettings(e.target.checked)}
|
|
id="advancedSettings"
|
|
className="sr-only peer"
|
|
value=""
|
|
/>
|
|
<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"
|
|
></div>
|
|
</label>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModemToggle;
|