90 lines
4.0 KiB
TypeScript
90 lines
4.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { ArrowUpRight, Calendar } from 'lucide-react';
|
|
|
|
interface NewsCardProps {
|
|
id: string;
|
|
slug: string;
|
|
titulo: string;
|
|
resumen: string;
|
|
tipo?: string;
|
|
fecha: string;
|
|
imagenUrl?: string | null;
|
|
showCategory?: boolean;
|
|
showFooterDate?: boolean;
|
|
showFooterButton?: boolean;
|
|
footerText?: string;
|
|
}
|
|
|
|
export const NewsCard = ({
|
|
id,
|
|
slug,
|
|
titulo,
|
|
resumen,
|
|
tipo,
|
|
fecha,
|
|
imagenUrl,
|
|
showCategory = false,
|
|
showFooterDate = true,
|
|
showFooterButton = true,
|
|
footerText
|
|
}: NewsCardProps) => {
|
|
// Formatear fecha
|
|
const fechaObj = new Date(fecha);
|
|
const fechaFormateada = fechaObj.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });
|
|
|
|
return (
|
|
<Link href={`/noticia/${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">
|
|
{/* 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>
|
|
{imagenUrl ? (
|
|
<img src={imagenUrl} alt={titulo} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-800 to-slate-900">
|
|
{/* No placeholder text as per user request */}
|
|
</div>
|
|
)}
|
|
|
|
{/* Badge/Tag - Habilitable por prop */}
|
|
{showCategory && (
|
|
<div className="absolute top-4 left-4 z-20">
|
|
<span className="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider backdrop-blur-md border border-white/20 bg-black/40 text-cyan-300 shadow-[0_0_10px_rgba(6,182,212,0.2)]">
|
|
{tipo?.toUpperCase() || 'NOTICIA'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Contenido */}
|
|
<div className="flex flex-col flex-grow p-6 relative z-20">
|
|
<h3 className="text-xl font-bold font-outfit text-white leading-snug mb-3 group-hover:text-cyan-400 transition-colors line-clamp-2">
|
|
{titulo}
|
|
</h3>
|
|
|
|
<p className="text-slate-400 text-sm leading-relaxed mb-6 line-clamp-3">
|
|
{resumen}
|
|
</p>
|
|
|
|
{/* Footer del card */}
|
|
<div className="mt-auto pt-5 border-t border-white/10 flex items-center justify-between">
|
|
<span className="text-xs font-black tracking-widest uppercase text-cyan-500 group-hover:text-cyan-300 transition-colors">
|
|
{showFooterDate ? (
|
|
<div className="flex items-center gap-2">
|
|
<Calendar size={12} />
|
|
{fechaFormateada}
|
|
</div>
|
|
) : (
|
|
footerText || "Ver más"
|
|
)}
|
|
</span>
|
|
{showFooterButton && (
|
|
<div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-cyan-500 group-hover:border-cyan-400 group-hover:text-slate-950 transition-all">
|
|
<ArrowUpRight size={16} className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|