mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-10-01 00:10:10 +02:00
31 lines
1.2 KiB
React
31 lines
1.2 KiB
React
|
import React, { useState, useEffect } from "react";
|
||
|
|
||
|
// ToggleButton: A reusable and semi-controlled toggle button
|
||
|
export default function ToggleButton({ initialChecked, onToggle, name }) {
|
||
|
const [isChecked, setIsChecked] = useState(initialChecked);
|
||
|
|
||
|
useEffect(() => {
|
||
|
setIsChecked(initialChecked);
|
||
|
}, [initialChecked]);
|
||
|
|
||
|
const handleToggle = () => {
|
||
|
setIsChecked(!isChecked);
|
||
|
if (onToggle) {
|
||
|
onToggle(!isChecked);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<label className="relative inline-flex cursor-pointer items-center">
|
||
|
<input
|
||
|
type="checkbox"
|
||
|
name={name}
|
||
|
onChange={handleToggle}
|
||
|
checked={isChecked}
|
||
|
className="peer sr-only pointer-events-none"
|
||
|
/>
|
||
|
<div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
|
||
|
</label>
|
||
|
);
|
||
|
}
|