import { DragEvent, useState } from "react"; import "./styles.css"; type Status = "todo" | "doing" | "done"; type Task = { id: number; title: string; status: Status }; const columns: { id: Status; label: string }[] = [ { id: "todo", label: "To do" }, { id: "doing", label: "In progress" }, { id: "done", label: "Done" }, ]; const initialTasks: Task[] = [ { id: 1, title: "Write brief", status: "todo" }, { id: 2, title: "Build prototype", status: "doing" }, { id: 3, title: "User testing", status: "done" }, ]; export default function App() { const [tasks, setTasks] = useState(initialTasks); const drop = (event: DragEvent, status: Status) => { event.preventDefault(); const id = Number(event.dataTransfer.getData("taskId")); setTasks((items) => items.map((task) => (task.id === id ? { ...task, status } : task)) ); }; return (

Product launch

Launch board

{columns.map((column) => (

event.preventDefault()} onDrop={(event) => drop(event, column.id)} >

{column.label} {tasks.filter((task) => task.status === column.id).length}

{tasks .filter((task) => task.status === column.id) .map((task) => (

event.dataTransfer.setData("taskId", String(task.id)) } > ST-{task.id}

{task.title}

))}

); }