27 lines
977 B
TypeScript
Executable File
27 lines
977 B
TypeScript
Executable File
import { TaskItem } from "@components";
|
|
import "./TaskList.component.scss"
|
|
|
|
interface TaskListProps {
|
|
taskGroup: TaskGroup
|
|
type?: "default" | "add-new"
|
|
}
|
|
|
|
const TaskList = (props: TaskListProps): JSX.Element => {
|
|
const { taskGroup, type } = props;
|
|
// Generate a random pastel color for the list-color indicator
|
|
const randomColor = `hsl(${Math.floor(Math.random() * 360)}, 70%, 70%)`;
|
|
return <div className="c-TaskList h-100 mx-2 d-flex flex-column">
|
|
{type === "add-new" ? <div className="c-TaskList__new flex-center h-100 flex-grow-1">
|
|
<span className="add-new-list-btn py-2 px-3 cursor-pointer">+ Add New List</span>
|
|
</div>
|
|
:
|
|
<>
|
|
<span className="list-header"><span className="list-color d-inline-block" style={{ backgroundColor: randomColor }} />{taskGroup.groupId} ({taskGroup.tasks.length})</span>
|
|
{taskGroup.tasks.map(task => <TaskItem key={task.id} task={task} />)}
|
|
</>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
export default TaskList
|