Spaces:
Sleeping
Sleeping
File size: 1,921 Bytes
6294700 ff1a29c 6294700 ff1a29c 6294700 ff1a29c 6294700 ff1a29c 6294700 d2a6779 6294700 d2a6779 6294700 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import classNames from "classnames";
import { useState } from "react";
import { HiInformationCircle } from "react-icons/hi";
import { useUpdateEffect } from "react-use";
interface Props {
label: string;
checked: boolean;
tooltip?: string;
onChange: (checked: boolean) => void;
}
export const Toggle: React.FC<Props> = ({
label,
onChange,
checked,
tooltip,
}) => {
const [checkedState, setCheckedState] = useState(checked);
useUpdateEffect(() => onChange(checkedState), [checkedState]);
return (
<div className="w-full flex items-center justify-start gap-2.5 relative">
<div className="flex items-center justify-start gap-2">
{tooltip && (
<div className="group cursor-pointer">
<HiInformationCircle className="text-slate-500 group-hover:text-slate-300 text-xl" />
<div className="bg-slate-950/90 z-10 min-w-[200px] rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
{tooltip}
</div>
</div>
)}
<label className="text-slate-400 text-sm font-medium capitalize">
{label}:
</label>
</div>
<div
className={classNames(
"w-[52px] h-[24px] rounded-full p-[4px] relative cursor-pointer",
{
"bg-red-700": !checkedState,
"bg-green-500": checkedState,
}
)}
onClick={() => setCheckedState(!checkedState)}
>
<div
className={classNames(
"rounded-full h-[16px] w-[16px] bg-slate-50 shadow-xl absolute top-[4px] transition-all duration-200",
{
"left-[4px]": !checkedState,
"left-[31px]": checkedState,
}
)}
/>
</div>
</div>
);
};
|