parent
6c83949338
commit
942a861b46
3 changed files with 76 additions and 8 deletions
@ -0,0 +1,69 @@ |
||||
import { useState } from "react"; |
||||
|
||||
const CustomSwitch = ({ |
||||
defaultValue, |
||||
set, |
||||
values, |
||||
label, |
||||
className, |
||||
register, |
||||
}) => { |
||||
const [value, setValue] = useState(defaultValue); |
||||
|
||||
return ( |
||||
<> |
||||
{label && <div className={"mx-1 text-xs"}>{label}</div>} |
||||
<div |
||||
onClick={() => { |
||||
setValue(!value); |
||||
register.onChange({ target: { name: register.name, value: !value } }); |
||||
}} |
||||
className={`${className} flex border border-blue-500 relative ${ |
||||
values |
||||
? "rounded h-full min-h-[50px]" |
||||
: " rounded-full h-9 aspect-[1/2]" |
||||
}`}
|
||||
> |
||||
<input |
||||
type="checkbox" |
||||
{...register} |
||||
checked={value ? "checked" : ""} |
||||
className="hidden" |
||||
/> |
||||
<div |
||||
style={{ transform: `translateX(${value ? 0 : -100}%)` }} |
||||
className={`${ |
||||
value || values ? "bg-blue-500" : "bg-gray-300" |
||||
} absolute right-[2%] top-[5%] z-0 transition-all duration-300 ${ |
||||
values |
||||
? "h-[90%] rounded w-[48%]" |
||||
: "h-[89%] rounded-full aspect-square" |
||||
}`}
|
||||
></div> |
||||
|
||||
{values ? ( |
||||
<div className=" w-[98%] h-[90%] flex flex-row-reverse right-[1%] top-[5%] z-10 absolute text-color19"> |
||||
<div |
||||
className={ |
||||
" w-1/2 h-full flex items-center justify-center cursor-pointer " + |
||||
(value ? "text-white" : "") |
||||
} |
||||
> |
||||
{values[1]} |
||||
</div> |
||||
<div |
||||
className={ |
||||
" w-1/2 h-full flex items-center justify-center cursor-pointer " + |
||||
(!value ? "text-white" : "") |
||||
} |
||||
> |
||||
{values[0]} |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default CustomSwitch; |
Loading…
Reference in new issue