"use client"; import { useState } from "react"; import { TrashIcon } from "@radix-ui/react-icons"; import { TaskCard } from "@/types"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; interface Props { task: TaskCard; deleteTask: (taskID: string) => void; updateTask: (taskID: string, content: string) => void; } function TaskCard({ task, deleteTask, updateTask }: Props) { const [mouseIsOver, setMouseIsOver] = useState(false); const [editMode, setEditMode] = useState(true); const { setNodeRef, attributes, listeners, transform, transition, isDragging, } = useSortable({ id: task.id, data: { type: "Task", task, }, disabled: editMode, }); const style = { transition, transform: CSS.Transform.toString(transform), }; const toggleEditMode = () => { setEditMode((prev) => !prev); setMouseIsOver(false); }; if (isDragging) { return (
); } if (editMode) { return ({task.name}
{mouseIsOver && ( )}