From b1f00e9d19631ced702ed36cbc812017ac7f8db2 Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Sat, 28 Mar 2026 17:14:46 -0500
Subject: [PATCH] fix: resolve Next.js Server Component hydration crash by
 removing onClick handler and refactoring Link hierarchy

---
 src/components/NewsCard.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/NewsCard.tsx b/src/components/NewsCard.tsx
index 180dcb4..9bef5e9 100644
--- a/src/components/NewsCard.tsx
+++ b/src/components/NewsCard.tsx
@@ -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>
     );
 };