feat: modulo de proyectos frontend (Next 16 + Bootstrap 5)

src/components/ui/Avatar.tsx

@@ -0,0 +1,31 @@
+import type { User } from "@/lib/types";
+
+interface AvatarProps {
+  user: User | null | undefined;
+  size?: "sm" | "lg";
+  title?: string;
+}
+
+/** Avatar circular con iniciales. Muestra un placeholder si no hay asignado. */
+export function Avatar({ user, size = "sm", title }: AvatarProps) {
+  const className = `avatar${size === "lg" ? " avatar-lg" : ""}`;
+
+  if (!user) {
+    return (
+      <span className={`${className} avatar-unassigned`} title={title ?? "Sin asignar"} aria-label="Sin asignar">
+        <i className="bx bx-user" />
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className={className}
+      style={{ background: user.color }}
+      title={title ?? user.name}
+      aria-label={user.name}
+    >
+      {user.initials}
+    </span>
+  );
+}