test2

# Actualizar app/blog/[slug]/page.tsx $articuloConImagenAdaptativa = @' import { query } from '@/lib/db' import { notFound } from 'next/navigation' import Link from 'next/link' import { Calendar, User, Eye, ArrowLeft } from 'lucide-react' import SidebarBlog from '../components/SidebarBlog' import BlogImage from '../components/BlogImage' export async function generateMetadata({ params }) { const { slug } = await params const articulos = await query( 'SELECT title, excerpt, featured_image FROM posts WHERE slug = ? AND published = 1', [slug] ) as any[] if (articulos.length === 0) return { title: 'Artículo no encontrado' } return { title: `${articulos[0].title} - CambiCash Blog`, description: articulos[0].excerpt, openGraph: { title: articulos[0].title, description: articulos[0].excerpt, images: articulos[0].featured_image ? [{ url: articulos[0].featured_image, width: 1200, height: 630, alt: articulos[0].title }] : [], } } } export default async function ArticuloPage({ params }) { const { slug } = await params const articulos = await query(` SELECT p.*, u.name as author_name, GROUP_CONCAT(c.name) as categories, GROUP_CONCAT(c.slug) as category_slugs FROM posts p LEFT JOIN users u ON p.author_id = u.id LEFT JOIN post_categories pc ON p.id = pc.post_id LEFT JOIN categories c ON pc.category_id = c.id WHERE p.slug = ? AND p.published = 1 GROUP BY p.id `, [slug]) as any[] if (articulos.length === 0) notFound() const articulo = articulos[0] const categorias = articulo.categories ? articulo.categories.split(',') : [] await query('UPDATE posts SET views = views + 1 WHERE id = ?', [articulo.id]) return ( <div className="min-h-screen bg-gray-50"> {/* Barra de navegación */} <div className="bg-white border-b sticky top-0 z-10"> <div className="container mx-auto px-4 py-3 md:py-4"> <Link href="/blog" className="inline-flex items-center gap-1 md:gap-2 text-sm md:text-base text-gray-600 hover:text-blue-600" > <ArrowLeft className="w-4 h-4 md:w-5 md:h-5" /> Volver al Blog </Link> </div> </div> {/* Hero del artículo con imagen adaptativa */} <div className="relative bg-gray-900"> {/* Imagen de fondo (hero) */} <div className="relative h-48 sm:h-64 md:h-80 lg:h-96"> <BlogImage src={articulo.featured_image} alt={articulo.title} type="hero" priority={true} /> <div className="absolute inset-0 bg-black/40" /> </div> {/* Título y metadatos sobre la imagen */} <div className="absolute bottom-0 left-0 right-0 p-4 md:p-8 text-white"> <div className="container mx-auto"> <div className="max-w-3xl"> {/* Categorías */} <div className="flex flex-wrap gap-1 md:gap-2 mb-2 md:mb-4"> {categorias.map((cat, idx) => ( <span key={idx} className="px-2 md:px-3 py-0.5 md:py-1 bg-blue-600 text-white text-xs md:text-sm rounded-full" > {cat} </span> ))} </div> <h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold mb-2 md:mb-4 line-clamp-3"> {articulo.title} </h1> <div className="flex flex-wrap items-center gap-2 md:gap-4 text-xs md:text-sm text-gray-200"> <span className="flex items-center gap-1"> <User className="w-3 h-3 md:w-4 md:h-4" /> {articulo.author_name || 'CambiCash'} </span> <span className="flex items-center gap-1"> <Calendar className="w-3 h-3 md:w-4 md:h-4" /> {new Date(articulo.published_at).toLocaleDateString('es-PE', { day: 'numeric', month: 'long', year: 'numeric' })} </span> <span className="flex items-center gap-1"> <Eye className="w-3 h-3 md:w-4 md:h-4" /> {articulo.views || 0} vistas </span> </div> </div> </div> </div> </div> {/* Contenido */} <div className="container mx-auto px-4 py-6 md:py-12"> <div className="grid lg:grid-cols-3 gap-6 md:gap-8"> <div className="lg:col-span-2"> <article className="bg-white rounded-xl md:rounded-2xl shadow-lg p-4 md:p-8"> <div className="prose prose-sm sm:prose-base md:prose-lg max-w-none" dangerouslySetInnerHTML={{ __html: articulo.content }} /> </article> </div> <SidebarBlog /> </div> </div> </div> ) } '@ # Guardar el archivo $articuloConImagenAdaptativa | Out-File -LiteralPath "C:\Users\JULIO\Desktop\cambicash-blog-final\app\blog\[slug]\page.tsx" -Encoding UTF8 -Forcevcx

Noticias

Panorama del dólar en 2026: análisis y perspectivas para el mercado cambiario

test2