71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
/**
|
|
* @file dashboard/header/DeleteDropZone.tsx
|
|
* @description Client component rendering an interactive drop zone for deleting tasks during drag-and-drop.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Trash2 } from "lucide-react";
|
|
|
|
/**
|
|
* Renders a drop target zone that appears dynamically during drag-and-drop operations,
|
|
* allowing users to delete tasks by dragging them onto the designated area.
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {(taskId: string) => void} props.onTaskDelete - Callback triggered when a task is dropped into the delete zone.
|
|
* @returns {JSX.Element | null} The rendered delete drop zone component, or null if no drag operation is active.
|
|
*/
|
|
export default function DeleteDropZone({
|
|
onTaskDelete,
|
|
}: {
|
|
onTaskDelete: (taskId: string) => void;
|
|
}) {
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [isOver, setIsOver] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleDragStart = () => setIsDragging(true);
|
|
const handleDragEnd = () => {
|
|
setIsDragging(false);
|
|
setIsOver(false);
|
|
};
|
|
|
|
window.addEventListener("dragstart", handleDragStart);
|
|
window.addEventListener("dragend", handleDragEnd);
|
|
|
|
return () => {
|
|
window.removeEventListener("dragstart", handleDragStart);
|
|
window.removeEventListener("dragend", handleDragEnd);
|
|
};
|
|
}, []);
|
|
|
|
if (!isDragging) return null;
|
|
|
|
return (
|
|
<div
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "move";
|
|
setIsOver(true);
|
|
}}
|
|
onDragLeave={() => setIsOver(false)}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
setIsOver(false);
|
|
const taskId = e.dataTransfer.getData("text/plain");
|
|
if (taskId) {
|
|
onTaskDelete(taskId);
|
|
}
|
|
}}
|
|
className={`peer flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm border-2 border-dashed cursor-pointer select-none transition-all duration-300 ease-out transform ${
|
|
isOver
|
|
? "bg-destructive border-destructive scale-110 shadow-lg animate-pulse"
|
|
: "bg-destructive/10 border-destructive/40 text-destructive scale-100 opacity-90 hover:opacity-100"
|
|
}`}
|
|
>
|
|
<Trash2 size={16} className={isOver ? "animate-bounce" : ""} />
|
|
<span>Drop to Delete</span>
|
|
</div>
|
|
);
|
|
}
|