From ea81e01a0a870d758065d95f35229c844b97eb26 Mon Sep 17 00:00:00 2001 From: luriasb Date: Tue, 20 Oct 2026 11:20:49 -0600 Subject: [PATCH] paso 6 --- app/components/KidCard.tsx | 2 +- app/kids/[slug]/page.tsx | 209 +++++++++++++++++++++++++++++++++++++ 2 files changed, 210 insertions(+), 1 deletion(-) create mode 100644 app/kids/[slug]/page.tsx diff --git a/app/components/KidCard.tsx b/app/components/KidCard.tsx index f3b0071..25742c3 100644 --- a/app/components/KidCard.tsx +++ b/app/components/KidCard.tsx @@ -13,7 +13,7 @@ const AVATAR_COLORS: Record = { "C9B6E8-7B5FC0": "bg-[#C9B6E8] text-[#7B5FC0]", }; -function avatarClasses(kid: Kid): string { +export function avatarClasses(kid: Kid): string { const key = `${kid.avatar.bg.replace("#", "")}-${kid.avatar.text.replace("#", "")}`; return AVATAR_COLORS[key] ?? ""; } diff --git a/app/kids/[slug]/page.tsx b/app/kids/[slug]/page.tsx new file mode 100644 index 0000000..afad8fc --- /dev/null +++ b/app/kids/[slug]/page.tsx @@ -0,0 +1,209 @@ +import Link from "next/link"; +import { notFound } from "next/navigation"; +import Sidebar from "@/app/components/Sidebar"; +import { avatarClasses } from "@/app/components/KidCard"; +import type { Kid, Parent, ParentStatus } from "@/app/data/kids"; +import { kids } from "@/app/data/kids"; + +/** Los 8 slugs del mock se prerenderizan; cualquier otro cae en notFound(). */ +export function generateStaticParams() { + return kids.map((kid) => ({ slug: kid.slug })); +} + +/** + * Colores dinámicos → utilities Tailwind con valores exactos. + * El set de fondos del mock es cerrado; nunca se usan atributos style. + */ +const PARENT_BG: Record = { + C9B6E8: "bg-[#C9B6E8]", + A9C7E8: "bg-[#A9C7E8]", + F4B8CC: "bg-[#F4B8CC]", + B9DEC4: "bg-[#B9DEC4]", + F2937A: "bg-[#F2937A]", + F4DC8E: "bg-[#F4DC8E]", +}; + +const STATUS_BADGE: Record = { + activa: { label: "ACTIVA", classes: "bg-[#CFEBD8] text-[#3E9B6C]" }, + pendiente: { label: "PENDIENTE", classes: "bg-[#F7E7A6] text-[#9A7B1E]" }, +}; + +function parentClasses(parent: Parent): string { + return PARENT_BG[parent.bg.replace("#", "")] ?? ""; +} + +function ParentRow({ parent }: { parent: Parent }) { + const badge = STATUS_BADGE[parent.status]; + return ( +
+
+ {parent.initial} +
+
+
{parent.name}
+
+ {parent.role} · {parent.note} +
+
+ + {badge.label} + +
+ ); +} + +export default async function KidProfilePage({ params }: { params: Promise<{ slug: string }> }) { + const { slug } = await params; + const kid: Kid | undefined = kids.find((candidate) => candidate.slug === slug); + if (!kid) notFound(); + + return ( +
+ +
+
+ {/* Breadcrumb */} + + + + + Volver a Niños + + +
+ {/* Columna izquierda */} +
+ {/* Identidad */} +
+
+ {kid.initial} +
+
+

{kid.name}

+

+ {kid.age} años · Sala {kid.room} +

+
+ + Editar + +
+ + {/* Alergias y notas (solo si tiene) */} + {kid.allergyNote && ( +
+
+ + + + +
+
+
Alergias y notas
+
{kid.allergyNote}
+
+
+ )} + + {/* Datos */} +
+
+ Fecha de nacimiento + {kid.birthDate} +
+
+ Sala + {kid.room} +
+
+ Ingreso + {kid.admission} +
+
+
+ + {/* Columna derecha */} +
+ + + + + + Resumen del día + + + {/* Padres vinculados */} +
+
+ PADRES VINCULADOS +
+
+ {kid.parents.map((parent) => ( + + ))} + + + + + + + Vincular otro padre + +
+
+
+
+
+
+
+ ); +}