const { tasks, title, submitComment, onClick, onTaskDragStop, onTaskDragStart, onTaskDragOver, createTask } = props; const ColumnContainer = styled.div` display: flex; flex-direction: column; height: 100%; min-width: 200px; margin-left: 2em; margin-right: 2em; background-color: transparent; `; const ColumnLabel = styled.div` color: #FFF; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; padding-bottom: 16px; padding-left: 6px; `; const TasksContainer = styled.div` display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; `; const AddTaskContainer = styled.div` display: flex; flex-direction: column; align-items: center; `; const TaskDetailsDialog = ({ task, submitComment, children }) => { return ( <Widget src="calimero.testnet/widget/Calimero.TaskChain.Board.Task.TaskDetailsDialog" props={{ task, children, submitComment }} /> ); }; return ( <ColumnContainer> <ColumnLabel> <text>{title}</text> </ColumnLabel> <TasksContainer droppable onDragOver={(e) => { onTaskDragOver(); }} onDrop={() => onTaskDragStop(title)} > {tasks.map((task, i) => ( <TaskDetailsDialog> <Widget src="calimero.testnet/widget/Calimero.TaskChain.Board.Task.TaskCard" props={{ task: task, status: title, index: i, onTaskDragStart: onTaskDragStart, onTaskDragStop: onTaskDragStop, onClick: onClick }} /> </TaskDetailsDialog> ))} </TasksContainer> <AddTaskContainer> <Widget src="calimero.testnet/widget/Calimero.TaskChain.Board.CreateTaskDialog" props={{ createTask: (taskTitle, taskDescription) => createTask(taskTitle, taskDescription), }} /> {state.saveInProgress && <div>Saving...</div>} </AddTaskContainer> </ColumnContainer> );