import React from "react"; import { motion, AnimatePresence, useMotionValue, animate } from "framer-motion"; import { CircleCheck, Trash } from "lucide-react"; import { cn } from "@/lib/utils"; export interface Todo { id: number; title: string; completed: boolean; } interface TodoItemProps { todo: Todo; onComplete: (id: number) => void; onDelete: (id: number) => void; onShowActions?: (id: number | null) => void; showActions?: number | null; className?: string; } export function TodoItem({ todo, onComplete, onDelete, onShowActions, showActions, className }: TodoItemProps) { const x = useMotionValue(0); return ( { onComplete(todo.id); onShowActions?.(null); }} > {todo.completed && ( )} { if (showActions) onShowActions?.(null); x.set(decay(info.offset.x / 5, 30)); }} onDragEnd={(e, info) => { if (info.offset.x > 50) { onComplete(todo.id); } else if (info.offset.x < -20 && !todo.completed) { onShowActions?.(todo.id); } animate(x, 0); }} > {todo.title} {todo.completed && ( )} {showActions === todo.id && (

{ onComplete(todo.id); onShowActions?.(null); }} > { onDelete(todo.id); onShowActions?.(null); }} >

)} ); } function decay(value: number, max: number) { let entry = value / max; let sigmoid = 2 / (1 + Math.exp(-entry)) - 1; return sigmoid * max; }