clean project sections and page and set pagination to projects

src/components/pages/project/ProjectGrid.tsx

@@ -1,17 +1,26 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import { IProjectCardProps } from './project';
-import { getProjects } from '@/services/projects';
+import Button from '@/components/uikit/button';
+import { useTranslations } from 'next-intl';
 
-export default async function ProjectsGrid({
+export default function ProjectsGrid({
   projects,
+  className = '',
 }: {
   projects: IProjectCardProps[];
+  className?: string;
 }) {
+  const t = useTranslations();
+
   return (
-    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 pt-12 pb-0 md:grid-cols-2 md:py-28">
+    <div
+      className={`grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-18 ${className}`}
+    >
       {projects.map((project, index) => (
-        <Link href={'/'} key={index} className="overflow-hidden bg-white">
+        <div className="group flex flex-col gap-4 overflow-hidden bg-white md:gap-6">
           <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
             <Image
               src={project.imageSrc}
@@ -19,12 +28,21 @@ export default async function ProjectsGrid({
               fill
               className="h-auto w-full object-cover"
             />
+            <div className="invisible absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 backdrop-blur-xs transition-all group-hover:visible group-hover:opacity-100">
+              <Button endIcon="showMore">
+                {t('com_home_projects_details_CTA')}
+              </Button>
+            </div>
           </div>
 
-          <div className="py-7 text-center">
-            <h2 className="mb-5 text-xl font-semibold">{project.title}</h2>
-          </div>
-        </Link>
+          <Link
+            href={'/'}
+            key={index}
+            className="group-hover:text-primary text-center text-gray-500"
+          >
+            <h2 className="text-xl font-semibold">{project.title}</h2>
+          </Link>
+        </div>
       ))}
     </div>
   );

src/components/pages/project/project.d.ts

@@ -3,3 +3,8 @@ export interface IProjectCardProps {
   title: string;
   link: string;
 }
+
+export interface IProjectGridViewProps {
+  initialProjects: IProjectCardProps[];
+  initialPagination: IPagination;
+}

src/components/pages/project/projectGridView.tsx

@@ -1,14 +1,39 @@
-import { getProjects } from '@/services/projects';
-import { IProjectCardProps } from './project';
-import ProjectsGrid from './ProjectGrid';
+'use client';
 
-export default async function ProjectsGridView() {
-  const projects: IProjectCardProps[] = await getProjects();
+import { getProjects } from '@/services/projects';
+import { IProjectGridViewProps } from './project';
+import ProjectsGrid from './ProjectGrid';
+import Pagination from '@/components/layout/pagination';
+import { useState } from 'react';
+
+export default function ProjectsGridView({
+  initialProjects,
+  initialPagination,
+}: IProjectGridViewProps) {
+  const [projects, setProjects] = useState(initialProjects);
+  const [pagination, setPagination] = useState(initialPagination);
+
+  const fetchPage = (page: number) => {
+    console.log(page);
+
+    getProjects(page)
+      .then((res) => {
+        setProjects(res.data);
+        setPagination(res.pagination);
+
+        document
+          .getElementById('projectList')
+          ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      })
+      .catch((error) => {
+        console.error('Failed to fetch Projects:', error);
+      });
+  };
 
   return (
     <>
-      <ProjectsGrid projects={projects} />
-      {/* <Pagination {...pagination} onPageChange={fetchPage} /> */}
+      {projects?.length ? <ProjectsGrid projects={projects} /> : <></>}
+      <Pagination {...pagination} onPageChange={fetchPage} />
     </>
   );
 }