Refactor: Full-width support for Clasificados
This commit is contained in:
parent
4f1bc2b3ba
commit
f71879da9c
@ -2,6 +2,7 @@ import { APPWRITE_ALMEIRA_CONFIG } from '@/lib/appwrite';
|
||||
import { createAdminClient } from '@/lib/appwrite.server';
|
||||
import { Query } from 'node-appwrite';
|
||||
import { NewsCard } from '@/components/NewsCard';
|
||||
import { GlobalSidebar, hasSidebarContent } from '@/components/AdWrappers';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
|
||||
async function fetchClasificadosData() {
|
||||
@ -56,6 +57,7 @@ async function fetchClasificadosData() {
|
||||
|
||||
export default async function ClasificadosPage() {
|
||||
const { posts, cardSettings } = await fetchClasificadosData();
|
||||
const hasSidebar = await hasSidebarContent();
|
||||
|
||||
return (
|
||||
<main className="animate-fade-in relative min-h-screen">
|
||||
@ -84,55 +86,65 @@ export default async function ClasificadosPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-12 h-1 bg-gradient-to-r from-purple-400 to-blue-600 rounded-full"></div>
|
||||
<span className="text-purple-400 font-bold tracking-widest uppercase text-sm">Avisos</span>
|
||||
</div>
|
||||
<h2 className="text-4xl font-outfit font-black text-white">Anuncios <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Recientes</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{posts.length === 0 ? (
|
||||
<div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
|
||||
<div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
|
||||
<Sparkles size={48} className="text-purple-500" />
|
||||
<section id="noticias" className="container mx-auto px-4 py-20 relative z-10 w-full">
|
||||
<div className="flex flex-col lg:flex-row gap-8 w-full items-start">
|
||||
<div className="flex-1 w-full relative">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-12 h-1 bg-gradient-to-r from-purple-400 to-blue-600 rounded-full"></div>
|
||||
<span className="text-purple-400 font-bold tracking-widest uppercase text-sm">Avisos</span>
|
||||
</div>
|
||||
<h2 className="text-4xl font-outfit font-black text-white">Anuncios <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Recientes</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Anuncios Recientes</h3>
|
||||
<p className="text-slate-400 relative z-10">El mercado se encuentra a la espera de nuevas ofertas globales.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{posts.map((post) => {
|
||||
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
|
||||
const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
|
||||
let imagenUrl = post.og_image_url || null;
|
||||
|
||||
if (post.resolved_media) {
|
||||
imagenUrl = `${ENDPOINT}/storage/buckets/${post.resolved_media.bucket_id}/files/${post.resolved_media.file_id}/preview?project=${PROJECT_ID}&width=800&height=500&quality=85`;
|
||||
}
|
||||
{posts.length === 0 ? (
|
||||
<div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
|
||||
<div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
|
||||
<Sparkles size={48} className="text-purple-500" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Anuncios Recientes</h3>
|
||||
<p className="text-slate-400 relative z-10">El mercado se encuentra a la espera de nuevas ofertas globales.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`grid grid-cols-1 md:grid-cols-2 ${hasSidebar ? 'lg:grid-cols-2 xl:grid-cols-3' : 'lg:grid-cols-3 xl:grid-cols-4'} gap-6`}>
|
||||
{posts.map((post) => {
|
||||
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
|
||||
const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
|
||||
let imagenUrl = post.og_image_url || null;
|
||||
|
||||
return (
|
||||
<NewsCard
|
||||
key={post.$id}
|
||||
id={post.$id}
|
||||
slug={post.slug || post.$id}
|
||||
titulo={post.titulo}
|
||||
resumen={post.resumen_redes || post.contenido?.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...'}
|
||||
tipo="Aviso"
|
||||
fecha={post.fecha_publicacion || post.$createdAt}
|
||||
imagenUrl={imagenUrl}
|
||||
showCategory={cardSettings.showCategory}
|
||||
showFooterDate={cardSettings.showFooterDate}
|
||||
showFooterButton={cardSettings.showFooterButton}
|
||||
footerText={cardSettings.footerText}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
if (post.resolved_media) {
|
||||
imagenUrl = `${ENDPOINT}/storage/buckets/${post.resolved_media.bucket_id}/files/${post.resolved_media.file_id}/preview?project=${PROJECT_ID}&width=800&height=500&quality=85`;
|
||||
}
|
||||
|
||||
return (
|
||||
<NewsCard
|
||||
key={post.$id}
|
||||
id={post.$id}
|
||||
slug={post.slug || post.$id}
|
||||
titulo={post.titulo}
|
||||
resumen={post.resumen_redes || post.contenido?.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...'}
|
||||
tipo="Aviso"
|
||||
fecha={post.fecha_publicacion || post.$createdAt}
|
||||
imagenUrl={imagenUrl}
|
||||
showCategory={cardSettings.showCategory}
|
||||
showFooterDate={cardSettings.showFooterDate}
|
||||
showFooterButton={cardSettings.showFooterButton}
|
||||
footerText={cardSettings.footerText}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasSidebar && (
|
||||
<aside className="w-full lg:w-[320px] xl:w-[360px] shrink-0 mt-8 lg:mt-0 sticky top-24">
|
||||
<GlobalSidebar />
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user