Kanban board with native drag and drop

'use client';
import { useState, type DragEvent } from 'react';

type Card = { id: string; title: string };
type Board = Record<string, Card[]>;

const seed: Board = {
  Todo: [{ id: 'a', title: 'Draft proposal' }, { id: 'b', title: 'Review pricing' }],
  Doing: [{ id: 'c', title: 'Build landing page' }],
  Done: [{ id: 'd', title: 'Kick-off call' }],
};

// Pure: returns a new board with the card removed and re-inserted at `index`.
export function moveCard(board: Board, id: string, to: string, index: number): Board {
  let card: Card | undefined;
  const without: Board = {};
  for (const [col, cards] of Object.entries(board)) {
    without[col] = cards.filter((c) => (c.id === id ? ((card = c), false) : true));
  }
  if (!card) return board;
  const target = [...without[to]!];
  target.splice(Math.min(index, target.length), 0, card);
  return { ...without, [to]: target };
}

export function Kanban() {
  const [board, setBoard] = useState(seed);
  const [over, setOver] = useState<string | null>(null);

  const drop = (e: DragEvent, col: string, index: number) => {
    e.preventDefault();
    e.stopPropagation(); // a card drop must not also trigger the column drop
    setOver(null);
    const id = e.dataTransfer.getData('text/plain');
    if (id) setBoard((b) => moveCard(b, id, col, index));
  };

  return (
    <div className="grid gap-4 sm:grid-cols-3">
      {Object.entries(board).map(([col, cards]) => (
        <section
          key={col}
          aria-label={col}
          onDragOver={(e) => { e.preventDefault(); setOver(col); }}
          onDragLeave={() => setOver((c) => (c === col ? null : c))}
          onDrop={(e) => drop(e, col, cards.length)}
          className={`min-h-40 rounded-lg p-3 ${over === col ? 'bg-blue-50' : 'bg-slate-100'}`}
        >
          <h3 className="mb-2 text-sm font-semibold">{col} ({cards.length})</h3>
          <ul className="space-y-2">
            {cards.map((card, i) => (
              <li
                key={card.id}
                draggable
                onDragStart={(e) => e.dataTransfer.setData('text/plain', card.id)}
                onDrop={(e) => drop(e, col, i)}
                className="cursor-grab rounded bg-white p-2 text-sm shadow-sm active:cursor-grabbing"
              >
                {card.title}
              </li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}