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

Fix: NewsTicker images/links and NewsCard footer button toggle

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-03-26 14:50:21 -05:00
parent 8058618bbb
commit a31532cb03
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/NewsCard.tsx
View File

@ -11,6 +11,7 @@ interface NewsCardProps {
imagenUrl?: string | null;
showCategory?: boolean;
showFooterDate?: boolean;
showFooterButton?: boolean;
footerText?: string;
}
@ -24,6 +25,7 @@ export const NewsCard = ({
imagenUrl,
showCategory = false,
showFooterDate = true,
showFooterButton = true,
footerText
}: NewsCardProps) => {
// Formatear fecha
@ -75,9 +77,11 @@ export const NewsCard = ({
footerText || "Ver más"
)}
</span>
<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>
{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>

12
src/components/NewsTicker.tsx
View File

@ -84,22 +84,18 @@ export default async function NewsTicker() {
<div className="flex animate-marquee whitespace-nowrap items-center hover:pause hover:[animation-play-state:paused]">
{/* Doble render para bucle infinito visual de CSS Marquee */}
{[...noticias, ...noticias].map((noticia, idx) => {
let imgUrl = null;
if (noticia.imagen_destacada_id) {
imgUrl = `${ENDPOINT}/storage/buckets/${noticia.imagen_destacada_id.bucket_id}/files/${noticia.imagen_destacada_id.file_id}/preview?project=${PROJECT_ID}&width=100&height=100&quality=80`;
}
return (
<Link
href={`/post/${noticia.slug}`}
href={`/noticia/${noticia.slug}`}
key={idx}
className="flex items-center gap-4 mx-8 group cursor-pointer border-r border-cyan-800/50 pr-8"
>
{imgUrl && (
{noticia.imagenUrl && (
// eslint-disable-next-line @next/next/no-img-element
<img src={imgUrl} alt={noticia.titulo} className="w-10 h-10 object-cover rounded-lg shadow-[0_0_10px_rgba(6,182,212,0.3)] group-hover:scale-110 group-hover:shadow-[0_0_15px_rgba(6,182,212,0.5)] transition-all duration-300 border border-white/10" />
<img src={noticia.imagenUrl} alt={noticia.titulo} className="w-10 h-10 object-cover rounded-lg shadow-[0_0_10px_rgba(6,182,212,0.3)] group-hover:scale-110 group-hover:shadow-[0_0_15px_rgba(6,182,212,0.5)] transition-all duration-300 border border-white/10" />
)}
<span className="text-sm font-bold text-slate-300 group-hover:text-cyan-400 transition-colors uppercase tracking-widest flex items-center gap-2">
{!imgUrl && <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>}
{!noticia.imagenUrl && <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>}
{noticia.titulo.length > 55 ? noticia.titulo.substring(0, 55) + '...' : noticia.titulo}
</span>
</Link>