33 lines
902 B
TypeScript
33 lines
902 B
TypeScript
'use client';
|
|
|
|
import { FC, useCallback } from 'react';
|
|
import clsx from 'clsx';
|
|
export const Slider: FC<{
|
|
value: 'on' | 'off';
|
|
fill?: boolean;
|
|
onChange: (value: 'on' | 'off') => void;
|
|
}> = (props) => {
|
|
const { value, onChange, fill } = props;
|
|
const change = useCallback(() => {
|
|
onChange(value === 'on' ? 'off' : 'on');
|
|
}, [value]);
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'w-[57px] h-[34px] p-[4px] border-fifth border rounded-[100px]',
|
|
value === 'on' && fill && 'bg-customColor4'
|
|
)}
|
|
onClick={change}
|
|
>
|
|
<div className="w-full h-full relative rounded-[100px]">
|
|
<div
|
|
className={clsx(
|
|
'absolute left-0 top-0 w-[24px] h-[24px] bg-customColor5 rounded-full transition-all cursor-pointer',
|
|
value === 'on' ? 'left-[100%] -translate-x-[100%]' : 'left-0'
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|