From 1c19bb4e7d862fb155a945f0b79ea3c0d4f3711e Mon Sep 17 00:00:00 2001
From: Borgia Leiva <edbole@campusaula.com>
Date: Tue, 10 Feb 2026 11:50:23 +0100
Subject: [PATCH] Added collaborator item for project-detail page

---
 .../collaborator-item.component.css           | 53 +++++++++++++++++++
 .../collaborator-item.component.html          | 12 +++++
 .../collaborator-item.component.ts            | 19 +++++++
 3 files changed, 84 insertions(+)
 create mode 100644 src/app/components/collaborator-item/collaborator-item.component.css
 create mode 100644 src/app/components/collaborator-item/collaborator-item.component.html
 create mode 100644 src/app/components/collaborator-item/collaborator-item.component.ts

diff --git a/src/app/components/collaborator-item/collaborator-item.component.css b/src/app/components/collaborator-item/collaborator-item.component.css
new file mode 100644
index 0000000..5674f2e
--- /dev/null
+++ b/src/app/components/collaborator-item/collaborator-item.component.css
@@ -0,0 +1,53 @@
+.collaborator-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+.collaborator-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e0f2fe;
+  color: #0369a1;
+  font-weight: 700;
+}
+
+.collaborator-info h4 {
+  margin: 0;
+  font-size: 16px;
+  color: #111827;
+}
+
+.collaborator-info p {
+  margin: 2px 0 0 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.btn-remove {
+  margin-left: auto;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid #fecaca;
+  background: #ffffff;
+  color: #b91c1c;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.btn-remove:hover {
+  background-color: #fee2e2;
+  border-color: #fca5a5;
+}
diff --git a/src/app/components/collaborator-item/collaborator-item.component.html b/src/app/components/collaborator-item/collaborator-item.component.html
new file mode 100644
index 0000000..2712e00
--- /dev/null
+++ b/src/app/components/collaborator-item/collaborator-item.component.html
@@ -0,0 +1,12 @@
+<article class="collaborator-item">
+  <div class="collaborator-avatar">
+    {{ user.name?.slice(0, 1) || '?' }}
+  </div>
+  <div class="collaborator-info">
+    <h4>{{ user.name }}</h4>
+    <p>{{ user.email }}</p>
+  </div>
+  <button class="btn-remove" type="button" aria-label="Remove collaborator" (click)="onRemove()">
+    x
+  </button>
+</article>
diff --git a/src/app/components/collaborator-item/collaborator-item.component.ts b/src/app/components/collaborator-item/collaborator-item.component.ts
new file mode 100644
index 0000000..afb1d7a
--- /dev/null
+++ b/src/app/components/collaborator-item/collaborator-item.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { User } from '../../models/auth.models';
+
+@Component({
+  selector: 'app-collaborator-item',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './collaborator-item.component.html',
+  styleUrl: './collaborator-item.component.css',
+})
+export class CollaboratorItemComponent {
+  @Input({ required: true }) user!: User;
+  @Output() remove = new EventEmitter<User>();
+
+  onRemove() {
+    this.remove.emit(this.user);
+  }
+}