269 lines
18 KiB
TypeScript
269 lines
18 KiB
TypeScript
import { FormEvent } from 'react';
|
|
import { Search, Menu, TrendingUp, TrendingDown, ChevronRight, Activity, Zap, Box, Hexagon, BarChart2, Globe, Share2, Instagram } from 'lucide-react';
|
|
|
|
const DICT: Record<string, any> = {
|
|
pt: {
|
|
back: 'Voltar ao Tracker',
|
|
live: 'DADOS AO VIVO',
|
|
trending: 'EM ALTA',
|
|
readTime: 'MIN',
|
|
articles: [
|
|
{ id: '1', title: 'Bitcoin Rompe Barreira dos $70k com ETF Spot', excerpt: 'Entrada massiva de capital institucional acelera a escassez on-chain antes do halving.', category: 'Bitcoin', time: '4', img: 'https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?auto=format&fit=crop&q=80&w=800' },
|
|
{ id: '2', title: 'Ethereum 2.0: O Impacto do Sharding na Escalabilidade', excerpt: 'Como a nova atualização promete reduzir as taxas de gas em até 90% para usuários finais.', category: 'Ethereum', time: '7', img: 'https://images.unsplash.com/photo-1622737133809-d95047b90223?auto=format&fit=crop&q=80&w=800' },
|
|
{ id: '3', title: 'Regulação de Cripto na UE: O que Muda com a MiCA', excerpt: 'As novas diretrizes europeias que podem servir de modelo para o resto do mundo financeiro.', category: 'Regulação', time: '10', img: 'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&q=80&w=800' }
|
|
]
|
|
}
|
|
};
|
|
|
|
export default function CryptoTheme({ posts = [], activeView = 'home', currentArticle, children }: { posts?: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
|
|
const lang = 'pt';
|
|
const ui = DICT[lang] || DICT['pt'];
|
|
|
|
const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
|
|
id: p.slug || p.id,
|
|
category: p.category_name || 'CRYPTO',
|
|
title: p.title,
|
|
excerpt: p.excerpt,
|
|
time: '4',
|
|
rating: '4.9',
|
|
img: p.image || `https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?auto=format&fit=crop&q=80&w=800&random=${i}`,
|
|
content: p.content,
|
|
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR')
|
|
})) : ui.articles;
|
|
|
|
const displayArticle = currentArticle ? {
|
|
...currentArticle,
|
|
id: currentArticle.slug || currentArticle.id,
|
|
category: currentArticle.category_name || 'CRYPTO',
|
|
time: '4',
|
|
rating: '4.9',
|
|
img: currentArticle.image || `https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?auto=format&fit=crop&q=80&w=800`
|
|
} : articlesToRender[0];
|
|
|
|
const COIN_DATA = [
|
|
{ rank: 1, name: 'Bitcoin', symbol: 'BTC', price: '$68,432.12', h24: -1.2, d7: +5.4, cap: '$1,342B', vol: '$42B', color: '#F7931A' },
|
|
{ rank: 2, name: 'Ethereum', symbol: 'ETH', price: '$3,842.50', h24: +2.1, d7: +1.2, cap: '$462B', vol: '$18B', color: '#627EEA' },
|
|
{ rank: 3, name: 'Tether', symbol: 'USDT', price: '$1.00', h24: 0.0, d7: 0.0, cap: '$110B', vol: '$65B', color: '#26A17B' },
|
|
{ rank: 4, name: 'Solana', symbol: 'SOL', price: '$145.22', h24: -4.5, d7: +12.8, cap: '$64B', vol: '$4.2B', color: '#14F195' },
|
|
{ rank: 5, name: 'BNB', symbol: 'BNB', price: '$588.40', h24: +0.8, d7: -2.3, cap: '$88B', vol: '$1.2B', color: '#F3BA2F' },
|
|
];
|
|
|
|
return (
|
|
<div className="crypto-terminal bg-[#0B0E14] text-[#EAECEF] min-h-screen font-sans selection:bg-[#FCD535] selection:text-black">
|
|
|
|
{/* Crypto Header - Terminal Style */}
|
|
<header className="bg-[#181A20] border-b border-[#2B3139] sticky top-0 z-50 shadow-2xl">
|
|
<div className="max-w-[1440px] mx-auto px-6 h-[72px] flex justify-between items-center">
|
|
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
|
<div className="w-8 h-8 bg-[#FCD535] rounded-md flex items-center justify-center text-[#181A20] group-hover:rotate-45 transition-transform">
|
|
<Hexagon className="w-5 h-5 fill-[#181A20]"/>
|
|
</div>
|
|
<span className="text-xl font-black text-[#EAECEF] tracking-tighter uppercase">COIN<span className="text-[#FCD535]">RADAR</span></span>
|
|
</a>
|
|
|
|
<div className="hidden lg:flex gap-8 text-[11px] font-black uppercase tracking-widest text-[#848E9C]">
|
|
<a href="/category/mercado" className="hover:text-white transition-colors">Mercado</a>
|
|
<a href="/category/bitcoin" className="hover:text-white transition-colors">Bitcoin</a>
|
|
<a href="/category/ethereum" className="hover:text-white transition-colors">Ethereum</a>
|
|
<a href="/swap" className="hover:text-[#FCD535] transition-colors">Swap Beta</a>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<div className="hidden sm:flex items-center bg-[#2B3139] rounded-lg px-4 py-2 border border-transparent focus-within:border-[#FCD535] transition-all">
|
|
<Search className="w-4 h-4 text-[#848E9C]"/>
|
|
<input type="text" placeholder="Buscar ativo..." className="bg-transparent border-none outline-none pl-3 text-[11px] font-bold text-white w-32"/>
|
|
</div>
|
|
<button className="bg-[#FCD535] text-[#181A20] text-[10px] font-black uppercase tracking-widest px-6 py-2.5 rounded hover:bg-white transition-colors">Connect</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{activeView === 'home' ? (
|
|
<main className="max-w-[1440px] mx-auto px-6 py-10 pb-32">
|
|
|
|
<div className="grid lg:grid-cols-12 gap-8 mb-12">
|
|
{/* Main Hero News Area */}
|
|
<div className="lg:col-span-8 flex flex-col gap-6">
|
|
<a href={`/${articlesToRender[0].id}`} className="w-full bg-gradient-to-br from-[#181A20] to-[#2B3139] rounded-2xl border border-[#2B3139] p-8 lg:p-12 group cursor-pointer relative overflow-hidden shadow-2xl block">
|
|
<div className="absolute -right-20 -bottom-20 opacity-5 group-hover:scale-110 transition-transform duration-1000">
|
|
<Hexagon className="w-96 h-96 text-[#FCD535]"/>
|
|
</div>
|
|
<div className="relative z-10">
|
|
<span className="bg-[#FCD535] text-[#181A20] px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest mb-6 inline-block">{ui.live}</span>
|
|
<h1 className="text-4xl sm:text-6xl font-black text-white leading-[1.1] tracking-tighter mb-8 group-hover:text-[#FCD535] transition-colors">{articlesToRender[0].title}</h1>
|
|
<p className="text-[#848E9C] text-lg font-medium leading-relaxed max-w-2xl">{articlesToRender[0].excerpt}</p>
|
|
</div>
|
|
</a>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
{[articlesToRender[1], articlesToRender[2]].map((art: any, i: number) => (
|
|
<a href={`/${art.id}`} key={art.id + i} className="bg-[#181A20] rounded-2xl border border-[#2B3139] p-6 cursor-pointer hover:border-[#FCD535]/50 transition-colors group flex flex-col h-full shadow-lg block">
|
|
<div className="w-full aspect-video rounded-xl overflow-hidden mb-6 bg-[#0B0E14]">
|
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={art.title}/>
|
|
</div>
|
|
<h3 className="text-xl font-black text-white leading-tight mb-4">{art.title}</h3>
|
|
<div className="mt-auto flex items-center gap-2 text-[10px] font-bold text-[#848E9C] uppercase tracking-widest">
|
|
<Activity className="w-3 h-3 text-[#0ECB81]"/> {art.category} • {art.time} {ui.readTime}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Live Trending Sidebar */}
|
|
<div className="lg:col-span-4 flex flex-col gap-8">
|
|
<div className="bg-[#181A20] rounded-2xl border border-[#2B3139] p-6 shadow-2xl">
|
|
<div className="flex items-center justify-between mb-8 pb-4 border-b border-[#2B3139]">
|
|
<h2 className="text-white font-black text-lg flex items-center gap-2"><Zap className="w-5 h-5 text-[#FCD535] fill-current"/> {ui.trending}</h2>
|
|
<button className="text-[10px] font-black text-[#FCD535] uppercase hover:underline">View All</button>
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
{COIN_DATA.map((coin) => (
|
|
<div key={coin.symbol} className="flex items-center justify-between group cursor-pointer">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded-full flex items-center justify-center font-black text-sm text-white border border-[#2B3139]" style={{backgroundColor: `${coin.color}20`, borderColor: `${coin.color}40`}}>
|
|
{coin.symbol[0]}
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-black text-white">{coin.name}</h4>
|
|
<p className="text-[10px] font-bold text-[#848E9C]">{coin.symbol}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm font-black text-white">{coin.price}</div>
|
|
<div className={`text-[10px] font-bold ${coin.h24 >= 0 ? 'text-[#0ECB81]' : 'text-[#F6465D]'}`}>
|
|
{coin.h24 >= 0 ? '+' : ''}{coin.h24}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar Banner Ad */}
|
|
<div className="w-full bg-[#FCD535] rounded-2xl p-8 text-center group cursor-pointer hover:bg-white transition-colors shadow-2xl">
|
|
<Box className="w-16 h-16 text-[#181A20] mx-auto mb-6 group-hover:scale-110 transition-transform"/>
|
|
<h3 className="text-2xl font-black text-[#181A20] tracking-tighter uppercase mb-4 leading-none">Cold Wallet Hub.</h3>
|
|
<p className="text-[#181A20]/70 text-xs font-bold mb-6">Proteja suas chaves privadas com a melhor custódia do mercado.</p>
|
|
<button className="bg-[#181A20] text-white w-full py-3 rounded-lg font-black uppercase text-[10px] tracking-widest shadow-xl">Comprar Agora</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Crypto Stats Table Row */}
|
|
<div className="bg-[#181A20] rounded-2xl border border-[#2B3139] shadow-2xl overflow-hidden">
|
|
<div className="p-6 border-b border-[#2B3139] flex items-center justify-between">
|
|
<h2 className="text-white font-black text-lg">Top Market Capitalization</h2>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left">
|
|
<thead className="bg-[#0B0E14]/50 text-[#848E9C] text-[10px] font-black uppercase tracking-widest">
|
|
<tr>
|
|
<th className="px-6 py-4">Rank</th>
|
|
<th className="px-6 py-4">Name</th>
|
|
<th className="px-6 py-4 text-right">Price</th>
|
|
<th className="px-6 py-4 text-right">24h %</th>
|
|
<th className="px-6 py-4 text-right hidden md:table-cell">Market Cap</th>
|
|
<th className="px-6 py-4 text-right hidden lg:table-cell">Volume (24h)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-[#2B3139]">
|
|
{COIN_DATA.map((coin) => (
|
|
<tr key={coin.rank} className="hover:bg-[#2B3139]/30 transition-colors cursor-pointer group">
|
|
<td className="px-6 py-4 text-[#848E9C] font-bold">{coin.rank}</td>
|
|
<td className="px-6 py-4 flex items-center gap-3">
|
|
<span className="font-black text-white">{coin.name}</span>
|
|
<span className="text-[#848E9C] font-bold">{coin.symbol}</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-right font-black text-white">{coin.price}</td>
|
|
<td className={`px-6 py-4 text-right font-black ${coin.h24 >= 0 ? 'text-[#0ECB81]' : 'text-[#F6465D]'}`}>
|
|
{coin.h24 >= 0 ? '+' : ''}{coin.h24}%
|
|
</td>
|
|
<td className="px-6 py-4 text-right font-bold text-[#B7BDC6] hidden md:table-cell">{coin.cap}</td>
|
|
<td className="px-6 py-4 text-right font-bold text-[#B7BDC6] hidden lg:table-cell">{coin.vol}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
) : (
|
|
/* --- ARTICLE VIEW --- */
|
|
<article className="max-w-[1000px] mx-auto px-6 py-16 pb-32 bg-[#0B0E14]">
|
|
<div className="max-w-[800px] mx-auto">
|
|
<a href="/" className="text-[10px] font-black uppercase tracking-widest text-[#848E9C] hover:text-[#FCD535] transition-colors block mb-12">
|
|
← {ui.back}
|
|
</a>
|
|
|
|
<header className="mb-16">
|
|
<span className="bg-[#2B3139] text-[#FCD535] px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest mb-6 inline-block border border-[#FCD535]/10">{displayArticle.category}</span>
|
|
<h1 className="text-4xl sm:text-6xl font-black leading-[1.1] tracking-tighter text-white mb-10 italic">
|
|
{displayArticle.title}
|
|
</h1>
|
|
<p className="text-xl text-[#848E9C] font-medium leading-relaxed border-l-4 border-[#FCD535] pl-8 my-10">
|
|
{displayArticle.excerpt} Cobertura on-chain completa por especialistas do terminal Radar.
|
|
</p>
|
|
<div className="flex items-center gap-8 py-8 border-y border-[#2B3139] text-[10px] font-black uppercase tracking-widest text-[#848E9C]">
|
|
<div className="flex items-center gap-2"><Zap className="w-4 h-4 text-[#FCD535]"/> Breaking News</div>
|
|
<div className="ml-auto flex items-center gap-6 hidden sm:flex">
|
|
<span className="flex items-center gap-2"><Activity className="w-4 h-4 text-[#0ECB81]"/> Live Feed</span>
|
|
<span className="flex items-center gap-2"><Clock className="w-4 h-4"/> {displayArticle.time} {ui.readTime}</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="prose prose-lg prose-invert max-w-none text-[#B7BDC6] font-medium leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-white prose-a:text-[#FCD535] prose-img:rounded-[2rem] prose-img:border prose-img:border-[#2B3139] prose-blockquote:border-[#FCD535] prose-blockquote:bg-[#181A20]">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)}
|
|
|
|
{/* Crypto Terminal Footer */}
|
|
<footer className="bg-[#181A20] text-[#EAECEF] pt-24 pb-12 font-sans border-t border-[#2B3139]">
|
|
<div className="max-w-[1440px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-[#2B3139] pb-20 mb-12">
|
|
|
|
<div className="md:col-span-2">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<div className="w-10 h-10 bg-[#FCD535] rounded-lg flex items-center justify-center text-[#181A20]">
|
|
<Hexagon className="w-6 h-6 fill-[#181A20]"/>
|
|
</div>
|
|
<span className="text-2xl font-black tracking-tighter uppercase text-white">COIN<span className="text-[#FCD535]">RADAR</span></span>
|
|
</div>
|
|
<p className="text-[#848E9C] text-sm font-medium leading-relaxed max-w-sm mb-8">Terminal de dados e inteligência de mercado. Focado em densidade de informação e ferramentas para traders de alta frequência.</p>
|
|
<div className="flex gap-4">
|
|
<a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Instagram className="w-5 h-5"/></a>
|
|
<a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Globe className="w-5 h-5"/></a>
|
|
<a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Share2 className="w-5 h-5"/></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-black uppercase tracking-widest text-[10px] text-[#444] mb-8">Políticas</h4>
|
|
<ul className="space-y-4 text-sm font-bold text-[#848E9C]">
|
|
<li><a href="/privacy" className="hover:text-white transition-colors">Privacidade</a></li>
|
|
<li><a href="/terms" className="hover:text-white transition-colors">Termos de Uso</a></li>
|
|
<li><a href="/disclaimer" className="hover:text-white transition-colors">Aviso Legal</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-black uppercase tracking-widest text-[10px] text-[#444] mb-8">Produtos</h4>
|
|
<ul className="space-y-4 text-sm font-bold text-[#848E9C]">
|
|
<li><a href="/search" className="hover:text-white transition-colors">Market Cap</a></li>
|
|
<li><a href="/search" className="hover:text-white transition-colors">Novas Listagens</a></li>
|
|
<li><a href="/swap" className="hover:text-white transition-colors">Exchange Hub</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="text-center font-black uppercase tracking-[0.4em] text-[8px] text-[#2B3139]">
|
|
© {new Date().getFullYear()} CoinRadar Terminal Hub. Built by Autoblog.
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|