Build a Delete Confirmation Modal

Problem/Feature Description

A project management app needs a confirmation step before deleting tasks. When a user clicks the delete icon on a task, a modal should appear asking them to confirm. Build this using React and TypeScript.

Modal behavior:

• Opens when the user clicks a delete button/icon on a task row
• Shows the task name so the user knows what they're deleting
• Has a warning message: "This action cannot be undone."
• Has two buttons: "Cancel" (closes the modal) and "Delete" (calls the delete API then closes)
• Clicking outside the modal or pressing Escape closes it without deleting
• The "Delete" button should be styled in red to indicate a destructive action
• While the delete request is in progress, show a loading spinner on the Delete button

The delete API is DELETE /api/tasks/:id.

Also build a simple task list component that renders a few tasks and integrates the modal:

• Each task row shows: task name, assignee, due date, and a delete icon button
• Clicking the delete icon opens the modal for that specific task

Output Specification

Produce:

• src/components/DeleteConfirmModal.tsx -- the modal component
• src/components/TaskList.tsx -- the task list with delete integration
• src/components/DeleteConfirmModal.css -- modal styles