Mahyar Khanbolooki
23 lines
726 B
TypeScript
23 lines
726 B
TypeScript
import React from 'react'
|
|
|
|
type Props = {
|
|
|
|
} & React.InputHTMLAttributes<HTMLDivElement>;
|
|
|
|
export default function NightModeSwitch({ checked, onClick }: Props) {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`visual-switch relative inline-flex justify-between px-1.5 h-6 w-10.5 items-center rounded-full transition-colors duration-300 ${checked ? "bg-gray-800" : "bg-gray-300"
|
|
}`}
|
|
>
|
|
A
|
|
<span
|
|
className={`absolute inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300 ${checked ? "translate-x-1" : "-translate-x-3.5"
|
|
}`}
|
|
/>
|
|
B
|
|
</div>
|
|
)
|
|
}
|