Implement portfolio admin management

app/[locale]/(site)/portfolio/page.tsx

@@ -9,14 +9,23 @@ import { buildLocalizedMetadata } from "@/lib/metadata";
 import { AppCard } from "@/components/ui/app-card";
 import { CardContent } from "@/components/ui/card";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
-import { pickText, portfolioItems } from "@/lib/site-data";
+import {
+  getActivePortfolioCategories,
+  getLocalizedValue,
+  getPublishedPortfolioProjects,
+} from "@/lib/portfolio";
 
 type PortfolioPageProps = {
   params: {
     locale: string;
   };
+  searchParams?: {
+    category?: string;
+  };
 };
 
+export const dynamic = "force-dynamic";
+
 export async function generateMetadata({
   params: { locale },
 }: PortfolioPageProps): Promise<Metadata> {
@@ -31,9 +40,19 @@ export async function generateMetadata({
   });
 }
 
-export default async function PortfolioPage({ params: { locale } }: PortfolioPageProps) {
+export default async function PortfolioPage({
+  params: { locale },
+  searchParams,
+}: PortfolioPageProps) {
   const localeKey = resolveLocale(locale);
   const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+  const selectedCategory = searchParams?.category ?? "";
+  const [categories, projects] = await Promise.all([
+    getActivePortfolioCategories(),
+    getPublishedPortfolioProjects({
+      categorySlug: selectedCategory || undefined,
+    }),
+  ]);
 
   return (
     <Container className="flex flex-col gap-section py-10 lg:py-14">
@@ -53,8 +72,34 @@ export default async function PortfolioPage({ params: { locale } }: PortfolioPag
         </AppCard>
       </MotionFade>
 
+      <section className="flex flex-wrap gap-3">
+        <Link
+          href={getLocalizedPath(localeKey, "/portfolio")}
+          className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
+            selectedCategory === ""
+              ? "border-border-strong bg-foreground text-background"
+              : "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
+          }`}
+        >
+          {t("all")}
+        </Link>
+        {categories.map((category) => (
+          <Link
+            key={category.id}
+            href={getLocalizedPath(localeKey, `/portfolio?category=${category.slug}`)}
+            className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
+              selectedCategory === category.slug
+                ? "border-border-strong bg-foreground text-background"
+                : "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
+            }`}
+          >
+            {getLocalizedValue(category.name, localeKey)}
+          </Link>
+        ))}
+      </section>
+
       <section className="grid gap-4 md:grid-cols-2">
-        {portfolioItems.map((item, index) => (
+        {projects.map((item, index) => (
           <MotionFade key={item.slug} delay={index * 0.05}>
             <AppCard interactive>
               <CardContent className="p-5">
@@ -64,18 +109,18 @@ export default async function PortfolioPage({ params: { locale } }: PortfolioPag
                 >
                   <div className="flex items-center justify-between gap-3">
                     <p className="text-sm text-muted-foreground/80">
-                      {pickText(item.category, localeKey)}
+                      {getLocalizedValue(item.category.name, localeKey)}
                     </p>
                     <p className="inline-flex items-center gap-1 text-xs text-muted-foreground/80">
                       <CalendarDays className="h-3.5 w-3.5" />
-                      {item.year}
+                      {item.projectYear}
                     </p>
                   </div>
                   <h2 className="mt-3 text-xl font-semibold text-foreground">
-                    {pickText(item.title, localeKey)}
+                    {getLocalizedValue(item.title, localeKey)}
                   </h2>
                   <p className="mt-2 text-sm text-muted-foreground">
-                    {pickText(item.summary, localeKey)}
+                    {getLocalizedValue(item.summary, localeKey)}
                   </p>
                   <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
                     {t("open")}
@@ -86,6 +131,14 @@ export default async function PortfolioPage({ params: { locale } }: PortfolioPag
             </AppCard>
           </MotionFade>
         ))}
+
+        {projects.length === 0 ? (
+          <AppCard className="md:col-span-2">
+            <CardContent className="p-6 text-sm text-muted-foreground">
+              {t("empty")}
+            </CardContent>
+          </AppCard>
+        ) : null}
       </section>
     </Container>
   );