99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
import { NewsShareActions } from "@/components/news/NewsShareActions";
|
|
import { Reveal } from "@/components/Reveal";
|
|
import type { DisplayNewsItem } from "@/lib/api";
|
|
|
|
export function NewsArticleDetail({
|
|
item,
|
|
basePath,
|
|
sectionLabel,
|
|
}: {
|
|
item: DisplayNewsItem;
|
|
basePath: string;
|
|
sectionLabel: string;
|
|
sectionLabelEn: string;
|
|
}) {
|
|
return (
|
|
<article className="bg-paper text-ink">
|
|
<header className="px-5 pb-20 pt-[125px] lg:px-12 lg:pb-24 lg:pt-[132px]">
|
|
<div className="mx-auto max-w-[1400px]">
|
|
<div className="flex items-center justify-between gap-5 text-[11px] text-[#9b896d] lg:text-[12px]">
|
|
<Link
|
|
href={basePath}
|
|
className="bg-[#f1efec] px-4 py-2 text-ink transition-colors duration-300 hover:bg-ink hover:text-white"
|
|
>
|
|
{sectionLabel}
|
|
</Link>
|
|
<time>{item.date}</time>
|
|
</div>
|
|
|
|
<Reveal>
|
|
<h1 className="mx-auto mt-14 max-w-[1050px] text-center text-[clamp(16px,2.55vw,34px)] leading-[1.65] font-normal text-ink lg:mt-12">
|
|
{item.title}
|
|
</h1>
|
|
</Reveal>
|
|
</div>
|
|
</header>
|
|
|
|
<Reveal>
|
|
<div className="relative h-[36vh] min-h-[300px] w-full overflow-hidden lg:h-[44vh] lg:min-h-[430px]">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
priority
|
|
quality={88}
|
|
sizes="100vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<section className="px-5 pb-24 pt-32 lg:px-12 lg:pb-36 lg:pt-[clamp(13rem,27vw,28rem)]">
|
|
<Reveal>
|
|
<div
|
|
className="news-article-body mx-auto max-w-[880px] text-[15px] leading-[2.25] text-ink lg:text-[17px]"
|
|
dangerouslySetInnerHTML={{ __html: item.bodyHtml }}
|
|
/>
|
|
</Reveal>
|
|
</section>
|
|
|
|
{item.gallery.length > 0 && (
|
|
<section className="mx-auto grid max-w-[1400px] grid-cols-1 gap-8 px-5 pb-36 md:grid-cols-12 lg:gap-x-8 lg:gap-y-44 lg:px-12 lg:pb-48">
|
|
{item.gallery.slice(0, 3).map((image, index) => (
|
|
<Reveal
|
|
key={`${image}-${index}`}
|
|
className={
|
|
index === 0
|
|
? "md:col-span-8"
|
|
: index === 1
|
|
? "md:col-span-4"
|
|
: "md:col-span-6 md:col-start-7"
|
|
}
|
|
delay={index * 80}
|
|
>
|
|
<div className={`relative overflow-hidden ${index === 0 ? "aspect-[16/8]" : "aspect-[16/9]"}`}>
|
|
<Image
|
|
src={image}
|
|
alt={`${item.title} - تصویر ${index + 1}`}
|
|
fill
|
|
quality={82}
|
|
sizes={index === 0 ? "(max-width: 768px) 100vw, 66vw" : "(max-width: 768px) 100vw, 42vw"}
|
|
className="object-cover transition-transform duration-[1200ms] ease-out-soft hover:scale-[1.025]"
|
|
/>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</section>
|
|
)}
|
|
|
|
<section className="pb-24 text-center lg:pb-32">
|
|
<p className="mb-6 text-sm text-ink">اشتراکگذاری خبر</p>
|
|
<NewsShareActions title={item.title} />
|
|
</section>
|
|
</article>
|
|
);
|
|
}
|