309 lines
19 KiB
TypeScript
309 lines
19 KiB
TypeScript
import { Menu, Search, Flame, Mail, ChevronRight, PlayCircle, Share2, Globe, Instagram } from 'lucide-react';
|
|
|
|
const DICT: Record<string, any> = {
|
|
pt: {
|
|
back: '← Voltar à Capa',
|
|
sections: 'SEÇÕES',
|
|
subscribe: 'Assinar',
|
|
live: 'AO VIVO: APPLE REVELA NOVA LINHA DE MACBOOKS M5',
|
|
trending: 'Em Alta',
|
|
latestNews: 'Feed Global',
|
|
sidebarAd: 'ANÚNCIO',
|
|
stayConnected: 'Siga-nos',
|
|
popular: 'Populares',
|
|
reviewsCategory: 'REVIEWS E HARDWARE',
|
|
softwareCategory: 'SISTEMAS & IA',
|
|
loadMore: 'Carregar Mais',
|
|
subscribeBtn: 'Inscrever-se',
|
|
newsletterTitle: 'Newsletter Oficial',
|
|
breakingNews: {
|
|
category: 'Exclusivo'
|
|
}
|
|
}
|
|
};
|
|
|
|
export default function MagazineTheme({ posts, activeView = 'home', currentArticle, children }: { posts: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
|
|
const ui = DICT['pt'];
|
|
|
|
const articlesToRender = posts.map(p => ({
|
|
id: p.slug,
|
|
title: p.data.title || p.slug,
|
|
excerpt: p.data.excerpt || 'Resumo do artigo...',
|
|
category: p.data.category || 'Tech',
|
|
author: p.data.author || 'Redação',
|
|
date: p.data.date ? new Date(p.data.date).toLocaleDateString('pt-BR') : 'Hoje'
|
|
}));
|
|
|
|
const displayArticle = currentArticle ? {
|
|
id: currentArticle.slug,
|
|
title: currentArticle.data.title || currentArticle.slug,
|
|
excerpt: currentArticle.data.excerpt || '',
|
|
category: currentArticle.data.category || 'Tech',
|
|
author: currentArticle.data.author || 'Redação',
|
|
date: currentArticle.data.date ? new Date(currentArticle.data.date).toLocaleDateString('pt-BR') : 'Hoje'
|
|
} : articlesToRender[0];
|
|
|
|
return (
|
|
<div className="magazine-scroll-container bg-[#f5f5f5] text-gray-900 min-h-full font-sans overflow-y-auto selection:bg-orange-500 selection:text-white pb-32">
|
|
|
|
{/* Top Banner Alert */}
|
|
<div className="bg-black text-white text-xs font-bold uppercase tracking-widest px-6 py-2 flex items-center justify-between">
|
|
<div className="flex items-center gap-2 cursor-pointer text-orange-500 hover:text-white transition-colors">
|
|
<Flame className="w-4 h-4" /> <span className="hidden sm:inline">{ui.live}</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-[10px]">
|
|
<span>{new Date().toLocaleDateString()}</span>
|
|
<div className="hidden sm:flex gap-3">
|
|
<Globe className="w-3 h-3 hover:text-blue-500 cursor-pointer"/>
|
|
<Share2 className="w-3 h-3 hover:text-blue-400 cursor-pointer"/>
|
|
<Mail className="w-3 h-3 hover:text-red-500 cursor-pointer"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<header className="bg-white border-b-2 border-gray-200 sticky top-0 z-40 shadow-sm">
|
|
<div className="max-w-[1400px] mx-auto">
|
|
{/* Logo Row */}
|
|
<div className="h-24 px-6 flex items-center justify-between">
|
|
<button className="flex items-center gap-2 font-black uppercase text-xs hover:text-orange-600 transition-colors">
|
|
<Menu className="w-6 h-6" /> <span className="hidden sm:block">{ui.sections}</span>
|
|
</button>
|
|
|
|
<a href="/" className="text-4xl md:text-5xl font-black tracking-tighter uppercase cursor-pointer flex flex-col items-center">
|
|
<div>THE<span className="text-orange-600">WIRED</span>MAG</div>
|
|
</a>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<button className="hover:text-orange-600 transition-colors"><Search className="w-6 h-6" /></button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation Row */}
|
|
<nav className="h-14 px-6 flex items-center justify-center gap-8 text-xs font-black uppercase tracking-widest overflow-x-auto whitespace-nowrap bg-gray-50 border-t border-gray-200">
|
|
<a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Tecnologia</a>
|
|
<a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Reviews</a>
|
|
<a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Games</a>
|
|
<a href="/login" className="text-gray-500 hover:text-black flex items-center gap-1"><PlayCircle className="w-4 h-4"/> AUTH_PORTAL</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
{activeView === 'home' ? (
|
|
<main className="max-w-[1400px] mx-auto px-6 py-8">
|
|
|
|
{/* Ad Space Top Leaderboard */}
|
|
<div className="w-full max-w-[970px] h-[90px] bg-gray-200 mx-auto mb-10 flex flex-col items-center justify-center border border-gray-300 text-gray-400 group cursor-pointer">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest mb-1">{ui.sidebarAd} 970x90</span>
|
|
<span className="text-xs group-hover:text-blue-500 font-bold uppercase">Publicidade Premium</span>
|
|
</div>
|
|
|
|
{/* JNews Style Masonry Bento Hero */}
|
|
<section className="grid lg:grid-cols-4 lg:grid-rows-2 gap-4 mb-14 h-auto lg:h-[600px]">
|
|
|
|
{/* Huge Left Panel */}
|
|
<article className="lg:col-span-2 lg:row-span-2 relative group overflow-hidden cursor-pointer">
|
|
<a href={`/${articlesToRender[0]?.id}`} className="block w-full h-full">
|
|
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt="Chip"/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent flex flex-col justify-end p-8">
|
|
<div className="mb-2"><span className="bg-orange-600 text-white text-[10px] font-black uppercase tracking-widest px-2 py-1">{ui.breakingNews.category}</span></div>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-black text-white leading-tight mt-2 drop-shadow-lg group-hover:text-orange-500 transition-colors">{articlesToRender[0]?.title}</h2>
|
|
<div className="mt-4 flex items-center gap-3 text-xs font-bold text-gray-300 uppercase tracking-widest">
|
|
<span>Por {articlesToRender[0]?.author}</span> <span>|</span> <span>{articlesToRender[0]?.date}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
{/* Small Right Panels */}
|
|
{articlesToRender.slice(1, 5).map((itm: any, idx: number) => (
|
|
<article key={itm.id} className="relative group overflow-hidden cursor-pointer h-[250px] lg:h-auto">
|
|
<a href={`/${itm.id}`} className="block w-full h-full">
|
|
<img src={`https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=400&random=${idx}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={itm.title} />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent flex flex-col justify-end p-4 lg:p-6">
|
|
<div className="mb-2"><span className="bg-black/60 backdrop-blur-sm border border-white/20 text-white text-[9px] font-black uppercase tracking-widest px-2 py-0.5">{itm.category}</span></div>
|
|
<h3 className="text-lg lg:text-xl font-bold text-white leading-tight drop-shadow-md group-hover:text-orange-500 transition-colors">{itm.title}</h3>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</section>
|
|
|
|
{/* 70/30 Layout: Main Content + Sidebar */}
|
|
<div className="grid lg:grid-cols-12 gap-10">
|
|
|
|
{/* LEFT MAIN CONTENT (70%) */}
|
|
<div className="lg:col-span-8 flex flex-col gap-12">
|
|
|
|
<section>
|
|
<div className="flex items-center justify-between border-b-2 border-black pb-2 mb-6">
|
|
<h3 className="text-2xl font-black uppercase">{ui.latestNews}</h3>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
{articlesToRender.slice(5).map((post: any) => (
|
|
<article key={post.id} className="group cursor-pointer border-b border-gray-200 pb-6 last:border-0">
|
|
<a href={`/${post.id}`} className="flex flex-col sm:flex-row gap-6">
|
|
<div className="sm:w-64 h-40 shrink-0 overflow-hidden relative">
|
|
<img src={`https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=400&random=${post.id}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={post.title}/>
|
|
<span className="absolute top-2 left-2 bg-orange-600 text-white text-[9px] font-black uppercase px-2 py-0.5">{post.category}</span>
|
|
</div>
|
|
<div className="flex flex-col justify-center flex-1">
|
|
<h4 className="text-2xl font-bold leading-tight mb-3 group-hover:text-orange-600 transition-colors">{post.title}</h4>
|
|
<p className="text-gray-500 text-sm mb-3">{post.excerpt}</p>
|
|
<div className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
|
|
{post.date}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Inline Banner Main Ad */}
|
|
<div className="w-full h-[150px] bg-gray-200 flex flex-col items-center justify-center border border-gray-300 text-gray-400 my-4 cursor-pointer">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest mb-1">{ui.sidebarAd} 728x90</span>
|
|
</div>
|
|
|
|
{/* Category Block 2 (Grid View) */}
|
|
<section>
|
|
<div className="flex items-center justify-between border-b-2 border-black pb-2 mb-6">
|
|
<h3 className="text-2xl font-black uppercase">{ui.reviewsCategory}</h3>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-8">
|
|
<article className="group cursor-pointer">
|
|
<a href="/" className="block">
|
|
<div className="w-full h-48 overflow-hidden mb-4"><img src="https://images.unsplash.com/photo-1605379399642-870262d3d051?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover group-hover:scale-105 transition-transform" /></div>
|
|
<span className="text-orange-600 text-[10px] font-black uppercase tracking-widest block mb-2">Editor's Choice</span>
|
|
<h4 className="text-xl font-bold leading-tight group-hover:text-orange-600">Review: Novo Hardware B2B</h4>
|
|
</a>
|
|
</article>
|
|
<article className="group cursor-pointer">
|
|
<a href="/" className="block">
|
|
<div className="w-full h-48 overflow-hidden mb-4"><img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover group-hover:scale-105 transition-transform" /></div>
|
|
<span className="text-blue-600 text-[10px] font-black uppercase tracking-widest block mb-2">Display</span>
|
|
<h4 className="text-xl font-bold leading-tight group-hover:text-blue-600">Testamos os Novos Monitores 8K</h4>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
{/* RIGHT SIDEBAR (30%) */}
|
|
<aside className="lg:col-span-4 flex flex-col gap-10">
|
|
|
|
{/* Stay Connected Widget */}
|
|
<div className="bg-white p-6 border border-gray-200 shadow-sm">
|
|
<h4 className="text-lg font-black uppercase text-center mb-6 relative">
|
|
<span className="bg-white px-4 relative z-10">{ui.stayConnected}</span>
|
|
<div className="absolute top-1/2 left-0 w-full h-px bg-gray-200 z-0"></div>
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-[#1877F2]/10 text-[#1877F2] p-4 text-center cursor-pointer hover:bg-[#1877F2] hover:text-white transition-colors flex flex-col items-center gap-2">
|
|
<Globe className="w-6 h-6" /> <span className="font-bold text-sm">240.5k</span>
|
|
</div>
|
|
<div className="bg-[#1DA1F2]/10 text-[#1DA1F2] p-4 text-center cursor-pointer hover:bg-[#1DA1F2] hover:text-white transition-colors flex flex-col items-center gap-2">
|
|
<Share2 className="w-6 h-6" /> <span className="font-bold text-sm">82.1k</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Popular Widget */}
|
|
<div className="bg-white p-6 border border-gray-200 shadow-sm relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-orange-600"></div>
|
|
<h4 className="text-xl font-black uppercase mb-6 flex items-center gap-2">
|
|
<Flame className="w-5 h-5 text-orange-600"/> {ui.popular}
|
|
</h4>
|
|
<div className="flex flex-col gap-5">
|
|
{articlesToRender.slice(0, 5).map((art, num) => (
|
|
<a href={`/${art.id}`} key={art.id} className="flex gap-4 items-center group">
|
|
<div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 font-black text-xl group-hover:bg-orange-600 group-hover:text-white transition-colors shrink-0">{num+1}</div>
|
|
<h5 className="font-bold text-sm leading-tight group-hover:text-orange-600 transition-colors">{art.title}</h5>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Newsletter Widget */}
|
|
<div className="relative bg-black text-white p-6 border-b-4 border-orange-600 text-center">
|
|
<Mail className="w-10 h-10 text-orange-500 mx-auto mb-4" />
|
|
<h4 className="text-xl font-black uppercase mb-2">{ui.newsletterTitle}</h4>
|
|
<form className="flex flex-col gap-2">
|
|
<input type="email" placeholder="Email" className="w-full text-black px-4 py-3 font-bold outline-none text-center" required />
|
|
<button type="submit" className="w-full bg-orange-600 hover:bg-orange-500 text-white font-black uppercase py-3 transition-colors">{ui.subscribeBtn}</button>
|
|
</form>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
) : (
|
|
/* --- ARTICLE VIEW --- */
|
|
<article className="bg-[#f5f5f5]">
|
|
<div className="max-w-4xl mx-auto px-6 py-12 bg-white shadow-lg my-12 border-t-8 border-black">
|
|
<a href="/" className="mb-8 text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-orange-600 inline-block">
|
|
{ui.back}
|
|
</a>
|
|
|
|
<div className="text-center mb-10">
|
|
<span className="bg-black text-white px-3 py-1 text-xs font-black uppercase tracking-widest">{displayArticle.category}</span>
|
|
<h1 className="text-4xl md:text-6xl font-black tracking-tight leading-[1.05] mt-6 mb-6">{displayArticle.title}</h1>
|
|
<p className="text-xl md:text-2xl text-gray-600 font-medium leading-relaxed max-w-3xl mx-auto">{displayArticle.excerpt}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-6 py-4 border-y border-gray-200 mb-10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gray-200 rounded-full"></div>
|
|
<div className="text-left font-sans">
|
|
<span className="block font-bold text-sm">Escrito por {displayArticle.author}</span>
|
|
<span className="block text-xs uppercase text-gray-500">{displayArticle.date}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-10">
|
|
<div className="hidden lg:block w-[160px] shrink-0">
|
|
<div className="sticky top-32 w-full h-[400px] bg-gray-100 flex items-center justify-center border border-gray-200 text-gray-400 font-bold text-xs uppercase writing-vertical-rl text-center">
|
|
{ui.sidebarAd} 160x600
|
|
</div>
|
|
</div>
|
|
<div className="prose prose-lg max-w-none flex-1 prose-headings:font-black prose-a:text-orange-600 hover:prose-a:underline prose-p:text-gray-800">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)}
|
|
|
|
{/* Footer Mega */}
|
|
<footer className="bg-black text-white pt-20 pb-10">
|
|
<div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-12 border-b border-gray-800 pb-16 mb-8 text-left">
|
|
<div className="md:col-span-2">
|
|
<div className="text-3xl font-black tracking-tighter uppercase mb-6">
|
|
THE<span className="text-orange-600">WIRED</span>MAG
|
|
</div>
|
|
<p className="text-gray-400 mb-6 max-w-sm">A maior plataforma global para jornalismo de tecnologia independente.</p>
|
|
<div className="flex gap-4">
|
|
<a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Globe className="w-4 h-4"/></a>
|
|
<a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Share2 className="w-4 h-4"/></a>
|
|
<a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Instagram className="w-4 h-4"/></a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-black text-sm uppercase tracking-widest mb-6">Legal</h4>
|
|
<ul className="space-y-4 text-sm font-bold text-gray-400">
|
|
<li><a href="/privacy" className="hover:text-orange-500">Privacidade</a></li>
|
|
<li><a href="/terms" className="hover:text-orange-500">Termos de Uso</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="max-w-[1400px] mx-auto px-6 text-center text-xs font-bold text-gray-600 uppercase tracking-widest">
|
|
© {new Date().getFullYear()} THE WIRED MAG
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|