#12Kanban board

Overview

Create a Kanban board with columns for To Do, In Progress, and Done with drag-and-drop functionality to move tasks between columns.

Requirements

• Implement a Kanban board with three columns:
  • To Do
  • In Progress
  • Done
• Each column should display a list of tasks.
• Implement an input to add new tasks to the To Do column.
• Enable drag-and-drop so tasks can be moved between columns.
• Provide a trash area or mechanism to delete tasks by dragging them there.
• Use the provided useApp hook to centralize all board logic

Notes

• A file with the task and column types (TaskType, Status, Column) is provided. Use these types to structure your Kanban board state.
• A base component ColumnStatus is provided to show a sample layout for columns and tasks. You can extend or modify it to implement drag-and-drop and task deletion.
• Ensure that each task has a unique id to avoid issues with React keys and drag-and-drop.
• You can optionally use helper functions like bgColor or borderColor from ColumnStatus to style tasks according to their status.

Tests

1. renders main title, input and columns
2. adds a new task when submitting input
3. deletes task when dropped on trash
4. moves task to another column on drag & drop