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.
64 lines
1.5 KiB
64 lines
1.5 KiB
import {
|
|
Checkbox,
|
|
CheckboxIcon,
|
|
CheckboxIndicator,
|
|
CheckboxLabel,
|
|
} from "../ui/checkbox";
|
|
import { HStack } from "../ui/hstack";
|
|
import { CheckIcon, CloseIcon, Icon } from "../ui/icon";
|
|
import { Pressable } from "../ui/pressable";
|
|
|
|
export interface Todo {
|
|
id: string;
|
|
task: string;
|
|
completed: boolean;
|
|
}
|
|
|
|
const TodoContainer = ({
|
|
todo,
|
|
toggleTodo,
|
|
deleteTodo,
|
|
...props
|
|
}: {
|
|
todo: Todo;
|
|
toggleTodo: (id: string) => void;
|
|
deleteTodo: (id: string) => void;
|
|
}) => {
|
|
return (
|
|
<HStack
|
|
{...props}
|
|
className="rounded-md hover:bg-secondary-200 justify-between items-center"
|
|
>
|
|
<Checkbox
|
|
onChange={(_isChecked) => toggleTodo(todo.id)}
|
|
size="sm"
|
|
aria-label={todo.task}
|
|
value={todo.task}
|
|
isChecked={todo.completed}
|
|
className="pl-6 py-2 flex-1"
|
|
>
|
|
<CheckboxIndicator>
|
|
<CheckboxIcon as={CheckIcon} />
|
|
</CheckboxIndicator>
|
|
<CheckboxLabel className="text-sm data-[checked=true]:line-through">
|
|
{todo.task}
|
|
</CheckboxLabel>
|
|
</Checkbox>
|
|
<Pressable className="pr-6 py-2" onPress={() => deleteTodo(todo.id)}>
|
|
{(state: any) => {
|
|
return (
|
|
<Icon
|
|
as={CloseIcon}
|
|
size="xs"
|
|
className={
|
|
state?.hovered ? "stroke-red-400" : "stroke-primary-50"
|
|
}
|
|
/>
|
|
);
|
|
}}
|
|
</Pressable>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default TodoContainer;
|
|
|