Fix

2026-08-10 13:07:14 +03:30
parent 95c3c74276
commit c4e8a54623
15 changed files with 341 additions and 58 deletions
@@ -0,0 +1,102 @@
+import { ProjectGalleryLightbox } from "@/components/portfolios/ProjectGalleryLightbox";
+import { Reveal } from "@/components/Reveal";
+import { PageCta } from "@/components/shared/PageCta";
+import { PageHero } from "@/components/shared/PageHero";
+import { newsAndBlogPage } from "@/data/site";
+import type { DisplayNewsItem } from "@/lib/api";
+
+/**
+ * Shared detail template for a single news or blog item — same rules as
+ * NewsListing keeps the two archives consistent, this keeps their detail
+ * pages consistent too, and mirrors the portfolio detail page's own
+ * jump-nav + gallery pattern since blog items carry the same gallery field.
+ * Body content is the item's real mainTextHtml from the API; nothing here
+ * is invented, and the gallery section only appears once a post actually
+ * has images to show.
+ */
+export function NewsArticleDetail({
+  item,
+  basePath,
+  sectionLabel,
+}: {
+  item: DisplayNewsItem;
+  basePath: string;
+  sectionLabel: string;
+}) {
+  const hasGallery = item.gallery.length > 0;
+
+  const navItems = [
+    { id: "overview", label: "معرفی" },
+    ...(hasGallery ? [{ id: "gallery", label: "گالری تصاویر" }] : []),
+  ];
+
+  return (
+    <>
+      <PageHero
+        image={item.image}
+        caption={item.date}
+        title={item.title}
+        breadcrumb={[
+          { label: "صفحه اصلی", href: "/" },
+          { label: "مقالات و اخبار", href: "/news-and-blog" },
+          { label: sectionLabel, href: basePath },
+          { label: item.title, href: `${basePath}/${item.slug}` },
+        ]}
+      />
+
+      {navItems.length > 1 && (
+        <nav aria-label="بخش‌های صفحه" className="border-b border-line bg-paper">
+          <ul className="no-scrollbar mx-auto flex max-w-[1400px] items-center gap-8 overflow-x-auto px-6 lg:px-12">
+            {navItems.map((navItem) => (
+              <li key={navItem.id}>
+                <a
+                  href={`#${navItem.id}`}
+                  className="block scroll-mt-24 py-5 text-sm whitespace-nowrap text-muted transition-colors duration-300 hover:text-gold"
+                >
+                  {navItem.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )}
+
+      <section id="overview" className="scroll-mt-20 bg-paper py-16 lg:py-24">
+        <div className="mx-auto max-w-[1400px] px-6 lg:px-12">
+          <Reveal>
+            <div className="mx-auto mb-14 flex max-w-[738px] flex-col items-center gap-3 text-center">
+              <p className="kicker justify-center">{sectionLabel}</p>
+              <time dateTime={item.publishedAt} className="text-xs text-muted">
+                {item.date}
+              </time>
+            </div>
+          </Reveal>
+
+          {item.bodyHtml && (
+            <Reveal delay={90}>
+              <div className="cms-body" dangerouslySetInnerHTML={{ __html: item.bodyHtml }} />
+            </Reveal>
+          )}
+        </div>
+      </section>
+
+      {hasGallery && (
+        <section id="gallery" className="scroll-mt-20 bg-sand py-16 lg:py-24">
+          <div className="mx-auto max-w-[1400px] px-6 lg:px-12">
+            <Reveal>
+              <p className="kicker mb-14 justify-center">گالری تصاویر</p>
+            </Reveal>
+
+            <ProjectGalleryLightbox images={item.gallery} alt={item.title} />
+          </div>
+        </section>
+      )}
+
+      <PageCta
+        caption={newsAndBlogPage.cta.caption}
+        title={newsAndBlogPage.cta.title}
+        action={newsAndBlogPage.cta.action}
+      />
+    </>
+  );
+}