81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { MDXRemote } from "next-mdx-remote/rsc";
|
|
import { getAllProjects, getProjectBySlug, getProjectSlugs } from "@/lib/projects/get-projects";
|
|
import { mdxComponents } from "@/components/mdx/mdxComponents";
|
|
import { ProjectHero } from "@/components/sections/ProjectHero";
|
|
import { ProjectMeta } from "@/components/sections/ProjectMeta";
|
|
import { ProjectTechnologies } from "@/components/sections/ProjectTechnologies";
|
|
import { OtherProjects } from "@/components/sections/OtherProjects";
|
|
|
|
type props = {
|
|
params: Promise<{
|
|
locale: string;
|
|
slug: string;
|
|
}>;
|
|
};
|
|
|
|
export function generateStaticParams() {
|
|
return getProjectSlugs().flatMap((slug: any) => [
|
|
{ locale: "fr", slug },
|
|
{ locale: "en", slug },
|
|
]);
|
|
}
|
|
|
|
export default async function ProjectPage({ params }: props) {
|
|
const { locale, slug } = await params;
|
|
const project = getProjectBySlug(slug);
|
|
|
|
if (!project) {
|
|
notFound();
|
|
}
|
|
|
|
const otherProjects = getAllProjects()
|
|
.filter((item: any) => item.slug !== slug)
|
|
.slice(0, 2)
|
|
.map((item: any) => ({
|
|
slug: item.slug,
|
|
title: item.title,
|
|
subtitle: item.subtitle,
|
|
}));
|
|
|
|
return (
|
|
<main className="bg-[#f5f3ef]">
|
|
<div className="mx-auto max-w-full flex flex-col items-center">
|
|
<ProjectHero
|
|
locale={locale}
|
|
title={project.title}
|
|
description={project.description}
|
|
dateLabel={project.dateLabel}
|
|
/>
|
|
|
|
<div className="lg:max-w-[70vw]">
|
|
<ProjectMeta
|
|
dateLabel={project.dateLabel}
|
|
category={project.category}
|
|
roles={project.roles}
|
|
client={project.client}
|
|
/>
|
|
|
|
<ProjectTechnologies technologies={project.technologies} />
|
|
|
|
<section className="pb-16">
|
|
<article className="
|
|
flex flex-col gap-20
|
|
[&>div>h2]:text-[clamp(80px,10vw,128px)] [&>div>h2]:font-serif [&>div>h2]:text-brand-brown
|
|
">
|
|
<MDXRemote
|
|
source={project.content}
|
|
components={mdxComponents}
|
|
options={{ blockJS: false, blockDangerousJS: true }}
|
|
/>
|
|
</article>
|
|
</section>
|
|
|
|
<OtherProjects locale={locale} projects={otherProjects} />
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|