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.
31 lines
871 B
31 lines
871 B
import clsx from 'clsx';
|
|
import { ReactElement } from 'react';
|
|
|
|
interface TodoItemProps {
|
|
label: string;
|
|
status: string;
|
|
onChecked: (newState: string) => void;
|
|
}
|
|
|
|
export const TodoItem = ({ status, label, onChecked }: TodoItemProps): ReactElement => {
|
|
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={(): void => onChecked(status === 'open' ? 'done' : 'open')}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|