const { task, status, index, onClick, onTaskDragStop, onTaskDragStart, } = props; const TaskCardContainer = styled.div` display: flex; flex-direction: column; padding: 16px 16px 2px 16px; border-radius: 4px; width: 240px; align-items: flex-start; justify-content: center; background-color: #1E1F28; color: white; `; const TaskTitle = styled.div` display: flex; overflow: hidden; flex-wrap: wrap; justify-content: start; text-align: left; padding-top: 4px; `; 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" } }} /> ); //if exist first file is the task image const taskImage = task?.files?.[0] ?? null; return ( <> <TaskCardContainer draggable onDragStart={() => onTaskDragStart(task?.id, status, index)} onDrop={() => onTaskDragStop(status, index)} onClick={onClick} > {task?.labels.length > 0 && <LabelContainer> {task?.labels.map(label => ( <Label backgroundColor={label.color}/> ))} </LabelContainer> } {taskImage && <ImageContainer> <TaskImage imageSrc={taskImage}/> </ImageContainer> } <TaskTitle> <p>{task?.title}</p> </TaskTitle> <TaskFooter> <p>{task?.id}</p> {task?.assignee && <AssigneeIcon> <i class="bi bi-person-fill"></i> <p>{task?.assignee}</p> </AssigneeIcon> } </TaskFooter> </TaskCardContainer> </> );