diff --git a/app/components/FeedHeader.tsx b/app/components/FeedHeader.tsx new file mode 100644 index 0000000..1c5dbbe --- /dev/null +++ b/app/components/FeedHeader.tsx @@ -0,0 +1,11 @@ +export default function FeedHeader() { + return ( +
+
+ GUARDERÍA · SALA SOLES +
+

Buenas, Caro

+

12 niños · martes 17 jun

+
+ ); +} diff --git a/app/components/PostCard.tsx b/app/components/PostCard.tsx new file mode 100644 index 0000000..798dfca --- /dev/null +++ b/app/components/PostCard.tsx @@ -0,0 +1,100 @@ +import Link from "next/link"; +import type { Post, PostCategory } from "@/app/data/feed"; + +/** Badge por categoría: colores exactos de la plantilla. */ +const BADGES: Record = { + logro: { label: "LOGRO", classes: "bg-[#CFEBD8] text-[#3E9B6C]" }, + actividad: { label: "ACTIVIDAD", classes: "bg-[#C7E7F1] text-[#2E89A6]" }, + anuncio: { label: "ANUNCIO", classes: "bg-[#CCD8F4] text-[#4E72C8]" }, +}; + +/** + * Colores dinámicos → utilities Tailwind con valores exactos. + * El set de pares del mock es cerrado; nunca se usan atributos style. + */ +const AVATAR_COLORS: Record = { + "A9D9E8-1F7A93": "bg-[#A9D9E8] text-[#1F7A93]", + "CCD8F4-4E72C8": "bg-[#CCD8F4] text-[#4E72C8]", +}; + +function avatarClasses(post: Post): string { + const key = `${post.authorColors.bg.replace("#", "")}-${post.authorColors.text.replace("#", "")}`; + return AVATAR_COLORS[key] ?? ""; +} + +export default function PostCard({ post }: { post: Post }) { + const badge = BADGES[post.category]; + + return ( +
+ {/* Encabezado: avatar + autor + badge */} +
+
+ {post.authorInitial ? ( + post.authorInitial + ) : ( + + + + )} +
+
+
{post.authorName}
+
+ {post.timeLabel} · {post.publishedBy} +
+
+
+ + {badge.label} +
+
+ + {/* Destinatario */} +
Para: {post.audience}
+ + {/* Contenido */} +

{post.body}

+ + {/* Placeholder de foto (solo posts de actividad con foto) */} + {post.photoLabel && ( + + + + + + + Foto · {post.photoLabel} + + )} + + {/* Acciones */} +
+ + + + + {post.likes} + + + + + + {post.comments} + + + + Editar + +
+
+ ); +} diff --git a/app/components/ShareBox.tsx b/app/components/ShareBox.tsx new file mode 100644 index 0000000..9bf07ba --- /dev/null +++ b/app/components/ShareBox.tsx @@ -0,0 +1,21 @@ +import Link from "next/link"; + +export default function ShareBox() { + return ( + +
+ C +
+ Compartí un momento… + + + + + + + + ); +}