clean project sections and page and set pagination to projects

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} />
     </>
   );
 }