bf9e72064b
Sustituye la paleta negra/azul B2C del panel del reformista por el verde de marca, neutros cálidos y titulares en Instrument Serif de la landing B2B. Añade tokens --color-primary-*, --color-stone-50 y --font-display al @theme. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { getGaleriaPanel } from '@/db/tenant-queries';
|
|
import { eliminarFotoGaleria } from './actions';
|
|
import { GALERIA_MAX_FOTOS } from '@/lib/galeria';
|
|
import GaleriaUploader from '@/components/panel/GaleriaUploader';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export default async function GaleriaPage() {
|
|
const fotos = await getGaleriaPanel();
|
|
|
|
return (
|
|
<div className="space-y-8 max-w-3xl">
|
|
<div>
|
|
<h1 className="font-display text-3xl tracking-tight text-black">Galería de trabajos</h1>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Sube fotos de reformas que ya has hecho. Aparecen en tu funnel para dar confianza al
|
|
cliente antes de pedir presupuesto.
|
|
</p>
|
|
</div>
|
|
|
|
<GaleriaUploader total={fotos.length} max={GALERIA_MAX_FOTOS} />
|
|
|
|
{fotos.length === 0 ? (
|
|
<p className="text-sm text-gray-400">
|
|
Aún no has subido ninguna foto. La galería no se mostrará en tu funnel hasta que añadas la
|
|
primera.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
|
|
{fotos.map((foto) => (
|
|
<figure
|
|
key={foto.id}
|
|
className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={foto.url}
|
|
alt={foto.titulo ?? 'Reforma'}
|
|
className="aspect-[4/3] w-full object-cover"
|
|
/>
|
|
{foto.titulo && (
|
|
<figcaption className="px-3 py-2 text-xs font-medium text-gray-700 truncate">
|
|
{foto.titulo}
|
|
</figcaption>
|
|
)}
|
|
<form action={eliminarFotoGaleria.bind(null, foto.id)} className="absolute top-2 right-2">
|
|
<button
|
|
type="submit"
|
|
aria-label="Eliminar foto"
|
|
className="flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-gray-600 shadow-sm transition hover:bg-red-500 hover:text-white"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|