const { task, status, index, onClick, 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; :hover { cursor: pointer; } `; 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={ () => onTaskDragStart( task?.id, props.status, index ) } onDrop={ () => onTaskDragStop( props.status, index ) } onClick={ onClick } > {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> </> );