sass-mohfarawati/app/[locale]/(site)/portfolio/[slug]/page.tsx

import type { Metadata } from "next";
import { getLocale, getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";

import { Container } from "@/components/layout/container";
import { PageHero } from "@/components/layout/page-hero";
import { PortfolioProjectDetail } from "@/components/site/portfolio-project-detail";
import { getSiteSettings } from "@/lib/app-config";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { resolveLocale } from "@/lib/locale";
import {
  getLocalizedValue,
  getPublishedPortfolioProjectBySlug,
} from "@/lib/portfolio";

type PortfolioItemPageProps = {
  params: Promise<{
    locale: string;
    slug: string;
  }>;
};

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: PortfolioItemPageProps): Promise<Metadata> {
  const { slug } = await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
  const item = await getPublishedPortfolioProjectBySlug(slug);

  if (!item) {
    return await buildLocalizedMetadata({
      locale: localeKey,
      pathname: `/portfolio/${slug}`,
      title: "Portfolio",
      description: "Portfolio item",
    });
  }

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: `/portfolio/${slug}`,
    title: getLocalizedValue(item.title, localeKey),
    description: getLocalizedValue(item.summary, localeKey),
  });
}

export default async function PortfolioItemPage({
  params,
}: PortfolioItemPageProps) {
  const { slug } = await params;
  const siteSettings = await getSiteSettings();
  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
  const item = await getPublishedPortfolioProjectBySlug(slug);

  if (!item) {
    notFound();
  }

  const t = await getTranslations({ locale: localeKey, namespace: "portfolioDetail" });

  return (
    <>
      <PageHero />

      <Container size="wide" className="pb-12 lg:pb-16">
        <PortfolioProjectDetail
          item={item}
          locale={localeKey}
          defaultLocale={siteSettings.defaultLocale}
          t={t}
        />
      </Container>
    </>
  );
}