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> </> );