67 lines
3 KiB
TypeScript
67 lines
3 KiB
TypeScript
import { useParams, Link } from 'react-router-dom';
|
|
import { ArrowLeft, Clock } from 'lucide-react';
|
|
import { posts } from '../data/posts';
|
|
import { useEffect } from 'react';
|
|
|
|
export function BlogPost() {
|
|
const { id } = useParams();
|
|
const post = posts.find(p => p.id === id);
|
|
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, [id]);
|
|
|
|
if (!post) {
|
|
return (
|
|
<div className="pt-40 pb-24 px-6 text-center text-4xl font-serif">Artigo não encontrado.</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<article className="pt-32 pb-24">
|
|
{/* Header */}
|
|
<header className="px-6 max-w-4xl mx-auto flex flex-col items-center text-center gap-6 mb-12">
|
|
<Link to="/blog" className="inline-flex items-center gap-2 text-stone-400 hover:text-primary-800 transition-colors text-sm font-medium uppercase tracking-widest self-start mb-4">
|
|
<ArrowLeft size={16} /> Voltar para o Blog
|
|
</Link>
|
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm border border-primary-200 bg-primary-50 px-4 py-1.5 rounded-full">{post.category}</span>
|
|
<h1 className="text-4xl md:text-6xl font-serif text-stone-900 leading-tight">
|
|
{post.title}
|
|
</h1>
|
|
<div className="flex items-center gap-4 text-stone-500 text-sm font-mono mt-4">
|
|
<span>{post.date}</span>
|
|
<span className="w-1 h-1 rounded-full bg-stone-300" />
|
|
<span>Por {post.author}</span>
|
|
<span className="w-1 h-1 rounded-full bg-stone-300" />
|
|
<span className="flex items-center gap-1.5"><Clock size={14} /> {post.timeToRead}</span>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero Image */}
|
|
<div className="px-6 max-w-6xl mx-auto mb-16">
|
|
<div className="aspect-[21/9] rounded-[40px] overflow-hidden bg-stone-100">
|
|
<img src={post.img} alt={post.title} className="w-full h-full object-cover" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="px-6 max-w-3xl mx-auto">
|
|
<div dangerouslySetInnerHTML={{ __html: post.content }} />
|
|
|
|
{/* Footer Author Bio */}
|
|
<div className="mt-20 pt-10 border-t border-stone-200 flex flex-col sm:flex-row items-center sm:items-start gap-6 bg-sand-100 p-8 rounded-[32px]">
|
|
<div className="w-20 h-20 rounded-full overflow-hidden shrink-0 bg-stone-200">
|
|
<img src={`https://i.pravatar.cc/150?u=${post.author}`} alt={post.author} className="w-full h-full object-cover" />
|
|
</div>
|
|
<div className="flex flex-col text-center sm:text-left">
|
|
<span className="text-xs uppercase tracking-widest text-primary-600 font-bold mb-1">Escrito por</span>
|
|
<span className="font-serif text-2xl text-stone-900 mb-2">{post.author}</span>
|
|
<p className="text-stone-600 font-light text-sm leading-relaxed">
|
|
Especialista da clínica Health Premium, dedicada a integrar as mais recentes tecnologias globais em protocolos de excelência que valorizam a beleza natural e o bem-estar sistêmico.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|