```tsx import React, { useState, useRef } from "react"; import { Trash, DragHandle } from "lucide-react"; type Todo = { id: number; text: string; }; export default function App() { const [todos, setTodos] = useState([]); const [draggingTodo, setDraggingTodo] = useState(null); const dragItem = useRef(null); const handleDragStart = (e: React.DragEvent, todo: Todo) => { dragItem.current = e.target as HTMLDivElement; dragItem.current.classList.add("dragging"); setDraggingTodo(todo); }; const handleDragEnd = () => { dragItem.current?.classList.remove("dragging"); setDraggingTodo(null); }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); const target = e.target as HTMLDivElement; const itemIdx = todos.findIndex((todo) => todo.id === draggingTodo?.id); const targetIdx = todos.findIndex((todo) => todo.id === parseInt(target.id)); const todosCopy = [...todos]; todosCopy.splice(targetIdx, 0, todosCopy.splice(itemIdx, 1)[0]); setTodos(todosCopy); }; const handleDeleteTodo = (id: number) => { setTodos(todos.filter((todo) => todo.id !== id)); }; const handleInputChange = (e: React.ChangeEvent) => { e.preventDefault(); const text = e.target.value; if (text.trim() !== "" && e.key === "Enter") { const newTodo: Todo = { id: new Date().getTime(), text: text.trim(), }; setTodos([...todos, newTodo]); e.target.value = ""; } }; return (

Drag n Drop Todo List

{todos.map((todo, index) => (

handleDragStart(e, todo)} onDragEnd={handleDragEnd} onDragOver={handleDragOver} className={`${ draggingTodo === todo ? "opacity-50" : "" } bg-white border border-gray-300 rounded-md flex justify-between items-center px-4 py-2 cursor-move`} >

{todo.text}

))}

); } ```