94 lines
3.8 KiB
TypeScript
94 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { Link, useParams } from 'react-router-dom';
|
|
import { ArrowLeftIcon, ChevronLeftIcon, ClockIcon } from 'lucide-react';
|
|
import { Reveal } from '../components/Reveal';
|
|
import { ButtonLink } from '../components/Button';
|
|
import { ArticleCard } from '../components/ArticleCard';
|
|
import { Newsletter } from '../components/home/Newsletter';
|
|
import { ARTICLES } from '../data/site';
|
|
|
|
export function ArticleDetail() {
|
|
const { slug } = useParams<{slug: string;}>();
|
|
const article = ARTICLES.find((a) => a.slug === slug);
|
|
|
|
if (!article) {
|
|
return (
|
|
<section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
|
|
<h1 className="text-section font-bold text-ivory">این مقاله پیدا نشد</h1>
|
|
<p className="mt-4 text-sm font-light text-ivory/60">فهرست کامل مقالات وبلاگ را ببینید.</p>
|
|
<ButtonLink to="/blog" variant="copper" className="mt-8">
|
|
بازگشت به وبلاگ
|
|
<ArrowLeftIcon className="h-4 w-4" />
|
|
</ButtonLink>
|
|
</section>);
|
|
|
|
}
|
|
|
|
const related = ARTICLES.filter((a) => a.slug !== article.slug).slice(0, 3);
|
|
|
|
return (
|
|
<>
|
|
<section className="relative flex h-[56vh] min-h-[400px] items-end overflow-hidden">
|
|
<img src={article.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
|
|
<div className="absolute inset-0 bg-ink/75" aria-hidden="true" />
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.15) 70%)' }}
|
|
aria-hidden="true" />
|
|
|
|
<div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
|
|
<nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
|
|
<Link to="/" className="transition-colors hover:text-copper">
|
|
صفحه اصلی
|
|
</Link>
|
|
<ChevronLeftIcon className="h-3.5 w-3.5" />
|
|
<Link to="/blog" className="transition-colors hover:text-copper">
|
|
وبلاگ
|
|
</Link>
|
|
<ChevronLeftIcon className="h-3.5 w-3.5" />
|
|
<span className="text-copper">{article.category}</span>
|
|
</nav>
|
|
<h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{article.title}</h1>
|
|
<div className="mt-6 flex items-center gap-5 text-xs font-light text-ivory/60">
|
|
<span>{article.date}</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<ClockIcon className="h-3.5 w-3.5" />
|
|
{article.read}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<article className="bg-ink py-20 lg:py-28">
|
|
<div className="mx-auto max-w-3xl px-6">
|
|
<Reveal>
|
|
<p className="border-r-2 border-copper pr-6 text-lg font-light leading-10 text-ivory/80">
|
|
{article.excerpt}
|
|
</p>
|
|
</Reveal>
|
|
{article.body.map((paragraph, i) =>
|
|
<Reveal key={paragraph} delay={0.03 * i}>
|
|
<p className="mt-8 text-base font-light leading-10 text-ivory/70">{paragraph}</p>
|
|
</Reveal>
|
|
)}
|
|
</div>
|
|
</article>
|
|
|
|
<section className="bg-char py-20 lg:py-28" aria-label="مقالات مرتبط">
|
|
<div className="mx-auto max-w-site px-6 lg:px-10">
|
|
<h2 className="text-section font-bold text-ivory">مقالات مرتبط</h2>
|
|
<div className="mt-6 h-px w-24 bg-copper/70" />
|
|
<div className="mt-12 grid gap-6 lg:grid-cols-3">
|
|
{related.map((item, i) =>
|
|
<Reveal key={item.slug} delay={0.06 * i} className="h-full">
|
|
<ArticleCard article={item} />
|
|
</Reveal>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Newsletter />
|
|
</>);
|
|
|
|
} |