You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
693 B
24 lines
693 B
import clsx from 'clsx';
|
|
|
|
export const TodoItem = ({ status, label, onChecked }) => {
|
|
return (
|
|
<div
|
|
className={clsx('p-4 flex items-center', {
|
|
'bg-gray-200': status === 'archived',
|
|
})}
|
|
>
|
|
<span
|
|
className={clsx('w-full block', { 'line-through': status !== 'open' })}
|
|
>
|
|
{label}
|
|
</span>
|
|
<input
|
|
checked={status !== 'open'}
|
|
disabled={status === 'archived'}
|
|
type="checkbox"
|
|
className="rounded text-pink-500 ml-8 cursor-pointer disabled:cursor-not-allowed disabled:bg-black disabled:hover:bg-black"
|
|
onChange={() => onChecked(status === 'open' ? 'done' : 'open')}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|