feat: add pagination

components/popover.tsx

@@ -39,7 +39,7 @@ const Popover = ({
             {title}
             <ChevronIcon
               className={`${
-                open ? 'rotate-180' : 'rotate-0'
+                open ? "rotate-180" : "rotate-0"
               } ml-2 h-5 w-5 transition duration-300 ease-in-out`}
               aria-hidden="true"
             />

components/portfolio.tsx

@@ -4,21 +4,22 @@ import { ArrowIcon } from "@/components/ui/icon";
 import Wrapper from "@/components/ui/wrapper";
 import { Button } from "@/shared/ui";
 import { useTranslation } from "next-i18next";
-import Link from "next/link";
 import React from "react";
 
 function Portfolio({
   posts,
 }: {
-  posts: Record<string, unknown>[];
+  posts: {
+    data: Record<string, unknown>[];
+  };
 }): React.JSX.Element {
   const { t } = useTranslation();
 
   return (
     <Wrapper className="max-w-[100vw]">
       <BlockTitle>{t("b_titles.recents")}</BlockTitle>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-4">
-        {posts.map((post: any) => (
+        {posts.data.map((post: any) => (
           <PortfolioCard
             key={post.slug}
             image={post.image}

components/services.tsx

@@ -57,7 +57,7 @@ const Services = () => {
           </Button>
         </div>
         <div className="lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-3 bg-[url('/arx-viz.jpg')] bg-cover bg-center rounded-3xl lg:p-10 grid justify-items-center content-center lg:justify-items-start lg:content-start">
-          <h3 className="text-base lg:text-3xl font-semibold">Арх виз</h3>
+          <h3 className="text-base lg:text-3xl font-semibold">Архвиз</h3>
           <h4 className="hidden lg:block mt-3 mb-6 text-base line-clamp-3 w-fit">
             Advanced training in executing an effective background inbound
             marketing strategy.

package.json

@@ -27,6 +27,7 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.0",
     "react-hook-form": "^7.46.1",
+    "react-paginate": "^8.2.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"

pages/index.tsx

@@ -7,7 +7,10 @@ import { getStaticPropsTranslations } from '@/utils/helpers/i18n';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const posts = await fetchData('posts/featured', context.locale);
+  const posts = await fetchData({
+    path: "posts/featured",
+    locale: context.locale,
+  });
 
   return {
     props: {

pages/portfolio/[slug].tsx

@@ -12,7 +12,10 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       notFound: true,
     };
 
-  const data = await fetchData(`posts/${context.params.slug}`, context.locale);
+  const data = await fetchData({
+    path: `posts/${context.params.slug}`,
+    locale: context.locale,
+  });
 
   if (!data) {
     return {

pages/portfolio/index.tsx

@@ -5,50 +5,110 @@ import { fetchData } from '@/utils/api/config';
 import { getStaticPropsTranslations } from '@/utils/helpers/i18n';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { useTranslation } from 'next-i18next';
+import { useRouter } from "next/router";
+import ReactPaginate from "react-paginate";
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const posts = await fetchData(
-    "posts",
-    context.locale,
-    context.query.byCategory
-      ? `/byCategory/${context.query.byCategory}`
-      : undefined
-  );
+  let page = Number(context.query.page) || 1;
+  // let category = Number(context.query.byCategory) || undefined;
+
+  const posts = await fetchData({
+    path: Number(context.query.byCategory)
+      ? `posts/byCategory/${context.query.byCategory}`
+      : "posts",
+    locale: context.locale,
+    params: {
+      page,
+    },
+  });
 
   return {
     props: {
       posts,
+      page,
       ...(await getStaticPropsTranslations(context.locale ?? "ru")),
     },
   };
 };
 
 export default function Page({
   posts,
+  page,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { t } = useTranslation();
+
+  const router = useRouter();
+
+  const setQueryParam = (page: string) => {
+    const queryParams = { page: page };
+    router.push({
+      pathname: router.pathname,
+      query: queryParams,
+    });
+  };
+
   return (
     <Wrapper className="max-w-[100vw] pb-10">
       <BlockTitle>{t("b_titles.recents")}</BlockTitle>
 
       {posts.message ? (
         <p className="text-center">{posts.message}</p>
       ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-4">
-          {posts.map((post: any) => (
-            <PortfolioCard
-              key={post.slug}
-              image={post.image}
-              title={post.title}
-              id={post.id}
-              slug={post.id}
-              // slug={post.slug}
-              categoryName={post.categoryName}
-              video={post.video}
+        <>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-4">
+            {posts.data.map((post: any) => (
+              <PortfolioCard
+                key={post.slug}
+                image={post.image}
+                title={post.title}
+                id={post.id}
+                slug={post.id}
+                // slug={post.slug}
+                categoryName={post.categoryName}
+                video={post.video}
+              />
+            ))}
+          </div>
+          <div className="mt-20 w-full flex justify-center">
+            <ReactPaginate
+              breakLabel={"..."}
+              nextLabel={<Arrow className="w-5 h-5 rotate-180" />}
+              pageRangeDisplayed={5}
+              pageCount={posts.pagination.totalPages}
+              initialPage={page - 1}
+              forcePage={page - 1}
+              onPageChange={({ selected }) => setQueryParam(`${selected + 1}`)}
+              previousLabel={<Arrow className="w-5 h-5" />}
+              pageLinkClassName="w-full h-full flex justify-center items-center text-white text-[13px] font-semibold  border border-white/40 rounded-lg font-sans hover:bg-white/10"
+              pageClassName="w-8 h-8"
+              activeLinkClassName="bg-white text-[#000] hover:text-white"
+              containerClassName="flex gap-1"
+              previousClassName="w-8 h-8  border border-white/40 rounded-lg font-sans hover:bg-white/10"
+              nextClassName="w-8 h-8  border border-white/40 rounded-lg font-sans hover:bg-white/10"
+              disabledClassName="border border-white/10 text-white/10"
+              previousLinkClassName="w-full h-full flex items-center justify-center"
+              nextLinkClassName="w-full h-full flex items-center justify-center"
+              renderOnZeroPageCount={null}
             />
-          ))}
-        </div>
+          </div>
+        </>
       )}
     </Wrapper>
   );
 }
+
+const Arrow = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.04858 12L10 11.06L6.90958 8L10 4.94L9.04858 4L5 8L9.04858 12Z"
+      fill="currentColor"
+    />
+  </svg>
+);

pages/services/index.tsx

@@ -4,7 +4,7 @@ import { getStaticPropsTranslations } from '@/utils/helpers/i18n';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const posts = await fetchData('posts', context.locale);
+  const posts = await fetchData({ path: "posts", locale: context.locale });
 
   return {
     props: {

public/locales/en/common.json

@@ -22,6 +22,7 @@
     "info": "Information"
   },
   "nav_items": {
+    "all": "All works",
     "ui_ux": "UX/UI design",
     "motion": "Motion graphics",
     "branding": "Branding",
@@ -43,5 +44,6 @@
     "date": "Year",
     "service": "Services",
     "author": "Author"
-  }
+  },
+  "services": {}
 }

public/locales/ru/common.json

@@ -22,6 +22,7 @@
     "info": "Информация"
   },
   "nav_items": {
+    "all": "Все работы",
     "ui_ux": "UX/UI дизайн",
     "motion": "Moушн графика",
     "branding": "Брендинг",

public/locales/uz/common.json

@@ -22,6 +22,7 @@
     "info": "Ma`lumot"
   },
   "nav_items": {
+    "all": "Barcha ishlar",
     "ui_ux": "UX/UI dizayn",
     "motion": "Motion grafika",
     "branding": "Brending",

utils/api/config.ts

@@ -1,11 +1,21 @@
-export const fetchData = async (
-  path: string,
-  locale?: string,
-  params?: Record<string, unknown> | string
-) => {
+export const fetchData = async ({
+  path,
+  locale,
+  params,
+}: {
+  path: string;
+  locale?: string;
+  params?: Record<string, unknown>;
+}) => {
   try {
     const response = await fetch(
-      `https://prodesignstudio.uz/api/v1/${path}${params ? params : ""}`,
+      `https://prodesignstudio.uz/api/v1/${path}?${
+        params
+          ? Object.entries(params)
+              .map((el) => el.join("="))
+              .join("&")
+          : ""
+      }`,
       {
         method: "GET",
         headers: {

utils/constants/nav.ts

@@ -34,6 +34,10 @@ export const nav = [
     path: "/portfolio",
     title: "nav.works",
     sub_menu: [
+      {
+        title: "nav_items.all",
+        path: "/portfolio",
+      },
       {
         title: "nav_items.ui_ux",
         path: "/portfolio?byCategory=1",