Build a Simple Kanban Board

import { useState } from "react";

const INITIAL = [
  { id: 1, title: "Setup project", status: "todo" },
  { id: 2, title: "Design UI", status: "in-progress" }
];

const COLUMNS = [
  { id: "todo", label: "Todo" },
  { id: "in-progress", label: "In Progress" },
  { id: "done", label: "Done" }
];

function Kanban() {
  const [tasks, setTasks] = useState(INITIAL);

  function moveTask(id, status) {
    setTasks((prev) =>
      prev.map((t) => (t.id === id ? { ...t, status } : t))
    );
  }

  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      {COLUMNS.map((col) => (
        <div key={col.id}>
          <h3>{col.label}</h3>
          {tasks
            .filter((t) => t.status === col.id)
            .map((t) => (
              <div key={t.id}>
                <p>{t.title}</p>
                <select
                  value={t.status}
                  onChange={(e) => moveTask(t.id, e.target.value)}
                >
                  {COLUMNS.map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.label}
                    </option>
                  ))}
                </select>
              </div>
            ))}
        </div>
      ))}
    </div>
  );
}