From ddb9aa0b327cd04a5fead2de66b5ce56b9f7ab2a Mon Sep 17 00:00:00 2001
From: Borgia Leiva <edbole@campusaula.com>
Date: Tue, 10 Feb 2026 11:50:03 +0100
Subject: [PATCH] Created basic task item component for project-detail

---
 .../task-item/task-item.component.css         | 55 +++++++++++++++++++
 .../task-item/task-item.component.html        |  9 +++
 .../task-item/task-item.component.ts          | 14 +++++
 3 files changed, 78 insertions(+)
 create mode 100644 src/app/components/task-item/task-item.component.css
 create mode 100644 src/app/components/task-item/task-item.component.html
 create mode 100644 src/app/components/task-item/task-item.component.ts

diff --git a/src/app/components/task-item/task-item.component.css b/src/app/components/task-item/task-item.component.css
new file mode 100644
index 0000000..a72fea7
--- /dev/null
+++ b/src/app/components/task-item/task-item.component.css
@@ -0,0 +1,55 @@
+.task-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background-color: #f9fafb;
+}
+
+.task-info h4 {
+  margin: 0 0 6px 0;
+  color: #111827;
+}
+
+.task-info p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.status {
+  align-self: flex-start;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.status-pending {
+  background-color: #fde68a;
+  color: #92400e;
+}
+
+.status-in_progress {
+  background-color: #bfdbfe;
+  color: #1d4ed8;
+}
+
+.status-completed {
+  background-color: #bbf7d0;
+  color: #15803d;
+}
+
+.status-stashed {
+  background-color: #e5e7eb;
+  color: #374151;
+}
+
+.status-failed {
+  background-color: #fecaca;
+  color: #b91c1c;
+}
diff --git a/src/app/components/task-item/task-item.component.html b/src/app/components/task-item/task-item.component.html
new file mode 100644
index 0000000..edcb4ed
--- /dev/null
+++ b/src/app/components/task-item/task-item.component.html
@@ -0,0 +1,9 @@
+<article class="task-item">
+  <div class="task-info">
+    <h4>{{ task.title }}</h4>
+    <p>{{ task.description || 'No description.' }}</p>
+  </div>
+  <span class="status" [ngClass]="'status-' + task.status.toLowerCase()">
+    {{ task.status.replace('_', ' ') }}
+  </span>
+</article>
diff --git a/src/app/components/task-item/task-item.component.ts b/src/app/components/task-item/task-item.component.ts
new file mode 100644
index 0000000..7cffa16
--- /dev/null
+++ b/src/app/components/task-item/task-item.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Task } from '../../models/tasks.models';
+
+@Component({
+  selector: 'app-task-item',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './task-item.component.html',
+  styleUrl: './task-item.component.css',
+})
+export class TaskItemComponent {
+  @Input({ required: true }) task!: Task;
+}