const { task, status, index, onViewTaskDetails, onTaskDragStop, onTaskDragStart, createStatus, } = props; const TaskCardContainer = styled.div` display: flex; flex-direction: column; padding: 16px 16px 2px 16px; border-radius: 4px; width: 15rem; align-items: flex-start; justify-content: center; background-color: #1e1f28; color: white; ${({ enabled }) => (enabled ? 'cursor: pointer;' : 'cursor: not-allowed')} `; const TaskTitle = styled.div` display: flex; justify-content: start; align-items: center; padding-top: 0.25rem; width: 100%; `; const Text = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; `; const ImageContainer = styled.div` align-items: center; justify-content: center; height: 100px; overflow: hidden; display: flex; `; const TaskFooter = styled.div` display: flex; justify-content: space-between; color: #6b7280; font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: 400; width: 100%; `; const Label = styled.div` height: 8px; border-radius: 200px; width: 42px; ${({ backgroundColor }) => backgroundColor && `background-color: ${backgroundColor};`} `; const LabelContainer = styled.div` gap: 4px; padding-bottom: 4px; display: flex; `; const AssigneeIcon = styled.div` display: flex; gap: 2px; `; const TaskImage = ({ imageSrc }) => ( <Widget src={imageSrc} props={{ style: { width: '32px', height: '32px' } }} /> ); const taskImage = task.files?.[0] ?? null; const savingStatus = createStatus.find((s) => s.title === task.title); return ( <> <TaskCardContainer draggable onDragStart={() => { if (task.id) { onTaskDragStart(task.id, task.title, props.status, index); } }} onDrop={() => { if (task.id) { onTaskDragStop(props.status, index); } }} onClick={onClick} onClick={() => { if (task.id) { onViewTaskDetails(task); } }} enabled={task.id} > {savingStatus && <p>{savingStatus.status}</p>} {task.labels.length > 0 && ( <LabelContainer> {task.labels.map((label, index) => ( <Label key={index} backgroundColor={label.color} /> ))} </LabelContainer> )} {taskImage && ( <ImageContainer> <TaskImage imageSrc={taskImage} /> </ImageContainer> )} <TaskTitle> <Text>{task.title}</Text> </TaskTitle> <TaskFooter> <p>{task.id}</p> {task.assignee && ( <AssigneeIcon> <i className="bi bi-person-fill"></i> <p>{task.assignee}</p> </AssigneeIcon> )} </TaskFooter> </TaskCardContainer> </> );