93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
import DetailBanner from "@/components/DetailBanner";
|
|
import ArticleBody from "@/components/ArticleBody";
|
|
import ShareLikeActions from "@/components/ShareLikeActions";
|
|
import PortfolioGallery from "@/components/PortfolioGallery";
|
|
import {
|
|
getAllBusinessSlugs,
|
|
getBusinessBySlug,
|
|
getBusinessPortfolio,
|
|
} from "@/data/business";
|
|
import styles from "./portfolio.module.css";
|
|
|
|
export function generateStaticParams() {
|
|
return getAllBusinessSlugs().flatMap((slug) => {
|
|
const business = getBusinessBySlug(slug);
|
|
return (business?.portfolios ?? []).map((item) => ({
|
|
slug,
|
|
portfolioSlug: item.slug,
|
|
}));
|
|
});
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: {
|
|
params: Promise<{ slug: string; portfolioSlug: string }>;
|
|
}) {
|
|
const { slug, portfolioSlug } = await params;
|
|
const data = getBusinessPortfolio(slug, portfolioSlug);
|
|
if (!data) return { title: "Portfolios details | IranBay" };
|
|
return {
|
|
title: `${data.portfolio.title} | Portfolios details | IranBay`,
|
|
description: data.portfolio.description,
|
|
};
|
|
}
|
|
|
|
export default async function PortfolioDetailPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ slug: string; portfolioSlug: string }>;
|
|
}) {
|
|
const { slug, portfolioSlug } = await params;
|
|
const data = getBusinessPortfolio(slug, portfolioSlug);
|
|
if (!data) notFound();
|
|
|
|
const { business, portfolio } = data;
|
|
|
|
return (
|
|
<div className={styles.page}>
|
|
<Header />
|
|
<main className={styles.shell}>
|
|
<DetailBanner
|
|
title="Portfolios details"
|
|
breadcrumbs={business.breadcrumbs}
|
|
/>
|
|
|
|
<div className={styles.layout}>
|
|
<PortfolioGallery images={portfolio.images} />
|
|
|
|
<div className={styles.copy}>
|
|
<div className={styles.meta}>
|
|
<span>
|
|
<img src="/images/icons/calendar.svg" alt="" />
|
|
{portfolio.date}
|
|
</span>
|
|
<span>
|
|
<img src="/images/icons/user.svg" alt="" />
|
|
{portfolio.author}
|
|
</span>
|
|
<span>
|
|
<img src="/images/icons/category.svg" alt="" />
|
|
{portfolio.category}
|
|
</span>
|
|
</div>
|
|
<h2 className={styles.title}>{portfolio.title}.</h2>
|
|
<p className={styles.intro}>{portfolio.description}</p>
|
|
<hr className={styles.rule} />
|
|
<div className={styles.bodyWrap}>
|
|
<ArticleBody blocks={portfolio.body} />
|
|
</div>
|
|
<div className={styles.actions}>
|
|
<ShareLikeActions />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|