146 lines
4.4 KiB
TypeScript
146 lines
4.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { ArrowLeft, CalendarDays, FolderKanban, Tag } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { getTranslations } from "next-intl/server";
|
|
import { notFound } from "next/navigation";
|
|
|
|
import { Container } from "@/components/layout/container";
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { routing } from "@/i18n/routing";
|
|
import { buildLocalizedMetadata } from "@/lib/metadata";
|
|
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
|
import { getPortfolioItem, pickText, portfolioItems } from "@/lib/site-data";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardContent } from "@/components/ui/card";
|
|
|
|
type PortfolioItemPageProps = {
|
|
params: {
|
|
locale: string;
|
|
slug: string;
|
|
};
|
|
};
|
|
|
|
export function generateStaticParams() {
|
|
return routing.locales.flatMap((locale) =>
|
|
portfolioItems.map((item) => ({
|
|
locale,
|
|
slug: item.slug,
|
|
})),
|
|
);
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params: { locale, slug },
|
|
}: PortfolioItemPageProps): Promise<Metadata> {
|
|
const localeKey = resolveLocale(locale);
|
|
const item = getPortfolioItem(slug);
|
|
|
|
if (!item) {
|
|
return buildLocalizedMetadata({
|
|
locale: localeKey,
|
|
pathname: `/portfolio/${slug}`,
|
|
title: "Portfolio",
|
|
description: "Portfolio item",
|
|
});
|
|
}
|
|
|
|
return buildLocalizedMetadata({
|
|
locale: localeKey,
|
|
pathname: `/portfolio/${slug}`,
|
|
title: pickText(item.title, localeKey),
|
|
description: pickText(item.summary, localeKey),
|
|
});
|
|
}
|
|
|
|
export default async function PortfolioItemPage({
|
|
params: { locale, slug },
|
|
}: PortfolioItemPageProps) {
|
|
const localeKey = resolveLocale(locale);
|
|
const item = getPortfolioItem(slug);
|
|
|
|
if (!item) {
|
|
notFound();
|
|
}
|
|
|
|
const t = await getTranslations({ locale: localeKey, namespace: "portfolioDetail" });
|
|
|
|
return (
|
|
<Container size="wide" className="flex flex-col gap-section py-10 lg:py-14">
|
|
<MotionFade>
|
|
<AppCard level={3}>
|
|
<CardContent className="p-6 lg:p-10">
|
|
<Button asChild variant="ghost" className="h-auto px-0 py-0 text-sm">
|
|
<Link href={getLocalizedPath(localeKey, "/portfolio")}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
{t("back")}
|
|
</Link>
|
|
</Button>
|
|
|
|
<h1 className="mt-5 text-3xl font-semibold text-foreground sm:text-4xl">
|
|
{pickText(item.title, localeKey)}
|
|
</h1>
|
|
<p className="mt-4 text-base text-muted-foreground sm:text-lg">
|
|
{pickText(item.summary, localeKey)}
|
|
</p>
|
|
|
|
<div className="mt-6 flex flex-wrap gap-3 text-sm text-foreground/80">
|
|
{[
|
|
{
|
|
icon: Tag,
|
|
label: pickText(item.category, localeKey),
|
|
},
|
|
{
|
|
icon: CalendarDays,
|
|
label: item.year,
|
|
},
|
|
{
|
|
icon: FolderKanban,
|
|
label: item.slug,
|
|
},
|
|
].map((meta) => {
|
|
const Icon = meta.icon;
|
|
|
|
return (
|
|
<AppCard key={meta.label} level={2}>
|
|
<CardContent className="flex items-center gap-2 p-3">
|
|
<Icon className="h-4 w-4 text-brand-primary" />
|
|
{meta.label}
|
|
</CardContent>
|
|
</AppCard>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</AppCard>
|
|
</MotionFade>
|
|
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
{[
|
|
{
|
|
title: t("challenge"),
|
|
text: t("challengeText"),
|
|
},
|
|
{
|
|
title: t("solution"),
|
|
text: t("solutionText"),
|
|
},
|
|
{
|
|
title: t("outcome"),
|
|
text: t("outcomeText"),
|
|
},
|
|
].map((section, index) => (
|
|
<MotionFade key={section.title} delay={0.05 * (index + 1)}>
|
|
<AppCard>
|
|
<CardContent className="p-5">
|
|
<h2 className="text-lg font-semibold text-foreground">{section.title}</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">{section.text}</p>
|
|
</CardContent>
|
|
</AppCard>
|
|
</MotionFade>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|