c

[zhanuzakkk]

import React, { useState } from "react";
import { Droppable } from "react-beautiful-dnd";
import Task from "./Task";

export default function Column({ column, tasks, data, setData }) {
const [newTaskContent, setNewTaskContent] = useState("");

const addTask = () => {
if (!newTaskContent.trim()) return;

const taskId = `task-${Date.now()}`;
const newTask = { id: taskId, content: newTaskContent };

const newState = {
  ...data,
  tasks: { ...data.tasks, [taskId]: newTask },
  columns: {
    ...data.columns,
    [column.id]: {
      ...column,
      taskIds: [...column.taskIds, taskId],
    },
  },
};

setData(newState);
setNewTaskContent("");

};

return (
<div style={{ background: "#eee", padding: "10px", borderRadius: "8px", width: "250px" }}>

{column.title}

{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps} style={{ minHeight: "50px" }}>
{tasks.map((task, index) => (

))}
{provided.placeholder}

)}

<input
type="text"
value={newTaskContent}
onChange={(e) => setNewTaskContent(e.target.value)}
placeholder="Новая задача"
style={{ width: "100%", marginTop: "8px" }}
/>
<button onClick={addTask} style={{ width: "100%", marginTop: "4px" }}>
Добавить


);
}