carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve Next.js Server Component hydration crash by removing onClick handler and refactoring Link hierarchy

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-03-28 17:14:46 -05:00
parent ae4e242252
commit b1f00e9d19
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/NewsCard.tsx
View File

@ -39,10 +39,15 @@ export const NewsCard = ({
const fechaFormateada = fechaObj.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });
return (
<Link href={`/${slug}`} className="group relative flex flex-col h-full bg-slate-900/40 backdrop-blur-xl border border-white/10 rounded-3xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(6,182,212,0.3)] hover:border-cyan-500/50">
<div className="group relative flex flex-col h-full bg-slate-900/40 backdrop-blur-xl border border-white/10 rounded-3xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(6,182,212,0.3)] hover:border-cyan-500/50">
{/* Click Frontal */}
<Link href={`/${slug}`} className="absolute inset-0 z-10" prefetch={false}>
<span className="sr-only">Ver {titulo}</span>
</Link>
{/* Imagen Destacada */}
<div className="relative aspect-[16/10] w-full overflow-hidden bg-slate-800">
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent z-10 opacity-90"></div>
<div className="relative aspect-[16/10] w-full overflow-hidden bg-slate-800 z-0">
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent z-10 opacity-90 pointer-events-none"></div>
{imagenUrl ? (
<img src={imagenUrl} alt={titulo} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
) : (
@ -65,7 +70,6 @@ export const NewsCard = ({
<div className="absolute top-4 right-4 z-30 opacity-0 group-hover:opacity-100 transition-opacity">
<Link
href={`/dashboard/posts/${id}`}
onClick={(e) => e.stopPropagation()}
className="flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-slate-950/80 backdrop-blur border border-cyan-500/50 text-cyan-400 hover:bg-cyan-500 hover:text-slate-950 transition-all shadow-lg"
title="Editar en Dashboard"
>
@ -104,6 +108,6 @@ export const NewsCard = ({
)}
</div>
</div>
</Link>
</div>
);
};