5df608f203
- agruparPorZona (lib/funnel/fotos.ts): helper puro que agrupa fotos (antes/después) y notas por zona, con fallback al tipo del lead. 5 tests. - getLead trae también lead_notas. - LeadFotosGaleria: galería por zona (Antes/Después + notas) que sustituye el grid plano de la ficha del panel. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import type { Lead, LeadFoto, LeadNota } from '@/db/schema';
|
|
import { TIPO_LABEL } from '@/lib/funnel';
|
|
import { agruparPorZona } from '@/lib/funnel/fotos';
|
|
|
|
function Fila({ titulo, fotos }: { titulo: string; fotos: LeadFoto[] }) {
|
|
if (fotos.length === 0) return null;
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<span className="text-xs uppercase tracking-wide font-semibold text-gray-400">{titulo}</span>
|
|
<div className="flex flex-wrap gap-2">
|
|
{fotos.map((f) => (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
key={f.id}
|
|
src={f.url}
|
|
alt=""
|
|
className="w-28 h-20 object-cover rounded-lg border border-gray-200"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Galería de la ficha: fotos antes/después y notas agrupadas por zona.
|
|
export default function LeadFotosGaleria({
|
|
fotos,
|
|
notas,
|
|
tipoLead,
|
|
}: {
|
|
fotos: LeadFoto[];
|
|
notas: LeadNota[];
|
|
tipoLead: Lead['tipoReforma'];
|
|
}) {
|
|
const grupos = agruparPorZona(fotos, notas, tipoLead ?? 'otro');
|
|
if (grupos.length === 0) return null;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-5">
|
|
{grupos.map((g) => (
|
|
<div key={g.zona} className="flex flex-col gap-3 border border-gray-200 rounded-lg p-4">
|
|
<span className="text-sm font-bold text-black">{TIPO_LABEL[g.zona]}</span>
|
|
<Fila titulo="Antes" fotos={g.antes} />
|
|
<Fila titulo="Después" fotos={g.despues} />
|
|
{g.notas.length > 0 && (
|
|
<ul className="flex flex-col gap-1 text-sm text-gray-600">
|
|
{g.notas.map((n) => (
|
|
<li key={n.id}>• {n.texto}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|