import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { FaUserCircle, FaCalendarAlt, FaExclamationTriangle } from "react-icons/fa";
import "tailwindcss/tailwind.css";
const initialData = {
columns: {
incoming: {
name: "Входящие задачи",
tasks: [
{ id: "1", content: "Узнать, почему на почту не приходят письма", priority: "important" },
{ id: "2", content: "Рассылка подарка с нового номера в WhatsApp", priority: "normal" }
]
},
inProgress: {
name: "В работе",
tasks: [
{ id: "3", content: "Разработка UI", priority: "urgent", deadline: "14.11.24" }
]
},
done: {
name: "Готово",
tasks: [
{ id: "4", content: "Создан репозиторий", priority: "normal" }
]
}
}
};
const KanbanBoard = () => {
const [data, setData] = useState(initialData);
const onDragEnd = (result) => {
if (!result.destination) return;
const { source, destination } = result;
const sourceColumn = data.columns[source.droppableId];
const destColumn = data.columns[destination.droppableId];
const sourceTasks = [...sourceColumn.tasks];
const destTasks = [...destColumn.tasks];
const [movedTask] = sourceTasks.splice(source.index, 1);
destTasks.splice(destination.index, 0, movedTask);
setData({
...data,
columns: {
...data.columns,
[source.droppableId]: { ...sourceColumn, tasks: sourceTasks },
[destination.droppableId]: { ...destColumn, tasks: destTasks }
}
});
};
return (
Канбан-доска
{Object.entries(data.columns).map(([columnId, column]) => (
{(provided) => (
{column.name}
{column.tasks.map((task, index) => (
{(provided) => (
{task.content}
{task.priority === "urgent" && }
{task.deadline && (
{task.deadline}
)}
)}
))}
{provided.placeholder}
)}
))}
);
};
export default KanbanBoard;