paso 02

app/components/KidCard.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link";
+import type { Kid } from "@/app/data/kids";
+
+/**
+ * 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<string, string> = {
+  "A9D9E8-1F7A93": "bg-[#A9D9E8] text-[#1F7A93]",
+  "F4B8CC-C44A7A": "bg-[#F4B8CC] text-[#C44A7A]",
+  "B9DEC4-3E8B62": "bg-[#B9DEC4] text-[#3E8B62]",
+  "F4DC8E-9A7B1E": "bg-[#F4DC8E] text-[#9A7B1E]",
+  "C9B6E8-7B5FC0": "bg-[#C9B6E8] text-[#7B5FC0]",
+};
+
+function avatarClasses(kid: Kid): string {
+  const key = `${kid.avatar.bg.replace("#", "")}-${kid.avatar.text.replace("#", "")}`;
+  return AVATAR_COLORS[key] ?? "";
+}
+
+/** "2 padres vinculados" | "1 padre vinculado" | "sin padres vinculados". */
+function parentsLabel(kid: Kid): string {
+  if (kid.parents.length === 0) return "sin padres vinculados";
+  return `${kid.parents.length} ${kid.parents.length === 1 ? "padre" : "padres"} vinculados`;
+}
+
+export default function KidCard({ kid }: { kid: Kid }) {
+  return (
+    <Link
+      href={`/kids/${kid.slug}`}
+      className="flex min-w-0 items-center gap-[14px] rounded-[18px] border border-[#ECE0D0] bg-[#FFFDF9] p-4 shadow-[0_4px_14px_-12px_rgba(120,90,60,.5)] transition duration-150 hover:-translate-y-[2px] hover:border-[#F2A78E]"
+    >
+      <div
+        className={`flex h-12 w-12 flex-none items-center justify-center rounded-full font-display text-[19px] font-semibold ${avatarClasses(kid)}`}
+      >
+        {kid.initial}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate font-display text-base font-semibold text-[#3F362E]">{kid.name}</div>
+        <div className="text-[13px] text-[#A89A8B]">
+          {kid.age} años · {parentsLabel(kid)}
+        </div>
+      </div>
+      {kid.parents.length === 0 ? (
+        <span className="flex-none rounded-full bg-[#F9D2DE] px-[9px] py-[5px] text-[11px] font-extrabold text-[#C56486]">
+          VINCULAR
+        </span>
+      ) : kid.allergies.length > 0 ? (
+        <span className="flex-none rounded-full bg-[#FBD8CC] px-[9px] py-[5px] text-[11px] font-extrabold text-[#D9684A]">
+          {kid.allergies[0]}
+        </span>
+      ) : (
+        <svg
+          className="flex-none"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#CBB89F"
+          strokeWidth="2.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      )}
+    </Link>
+  );
+}