new create

src/components/portfolios/PortfolioBrowser.tsx

@@ -2,12 +2,14 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { Reveal } from "@/components/Reveal";
+import { Pagination } from "@/components/shared/Pagination";
 import type { DisplayProject, PortfolioCategory } from "@/lib/api";
 
 const ALL_ID = "__all__";
+const PAGE_SIZE = 9;
 
 /**
  * Category tabs above a grid — no search, click a tab to filter in place.
@@ -25,6 +27,7 @@ export function PortfolioBrowser({
   categories: PortfolioCategory[];
 }) {
   const [activeId, setActiveId] = useState(ALL_ID);
+  const [page, setPage] = useState(1);
   const showTabs = categories.length > 1;
 
   const filtered = useMemo(
@@ -32,6 +35,12 @@ export function PortfolioBrowser({
     [projects, activeId],
   );
 
+  // Switching category with a stale page number could land on an empty page.
+  useEffect(() => setPage(1), [activeId]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const pageItems = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
   return (
     <div>
       {showTabs && (
@@ -84,8 +93,8 @@ export function PortfolioBrowser({
           پروژه‌ای در این دسته یافت نشد.
         </p>
       ) : (
-        <ul className="mx-auto grid max-w-[1400px] gap-6 px-6 pb-24 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:px-12 lg:pb-32">
-          {filtered.map((project, i) => (
+        <ul className="mx-auto grid max-w-[1400px] gap-6 px-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:px-12">
+          {pageItems.map((project, i) => (
             <Reveal as="li" key={project.slug} delay={(i % 6) * 70}>
               <Link href={`/portfolios/${project.slug}`} className="group block">
                 <div className="relative aspect-[3/4] overflow-hidden bg-ink">
@@ -126,6 +135,10 @@ export function PortfolioBrowser({
           ))}
         </ul>
       )}
+
+      <div className="mx-auto max-w-[1400px] px-6 pb-24 lg:px-12 lg:pb-32">
+        <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
+      </div>
     </div>
   );
 }