Implemented Pagination (#193)

## Description

As described in #178 , a pagination system has been added. Also, line
clamp is added to Product Card title.

## Screenshots

<!-- PLease add screenshots -->

![Pagination_projectHub](https://user-images.githubusercontent.com/92118155/231947409-147649fa-f1b5-49f9-87ae-b5acec919161.JPG)


## Checklist

Please review and check off the following items before submitting your
PR:

 <!-- If yes then add 'x' into '[ ]'  -->

- [x] I have tested my changes to ensure they work as expected
- [x] I have included documentation for any new features or changes
- [x] I have formatted my code according to the project's style
guidelines
- [x] I have written tests for any new features or changes
- [x] I have run the project's test suite and verified that all tests
pass
- [x] I have updated the README and any other relevant documentation
- [x] I have checked for any spelling or grammatical errors

## Additional Information

In case of tech-labels in Product-Card, usage of line-clamp property
shows inappropriate behavior (as shown below) . Therefore, JS is used
for maintaining the length of the line.

![Disturbance_lineClamp](https://user-images.githubusercontent.com/92118155/231946991-4fb542cd-c79e-4fe6-b884-f95646f21fbd.JPG)

src/components/ProjectCard.jsx

@@ -1,22 +1,19 @@
 import React from "react"
 
 function ProjectCard({ gh, link, title, description, tech }) {
-  const maxLength_title = 25
   const maxLength_techtag = 6
 
-  let newTitle = title.length > maxLength_title ? title.slice(0, maxLength_title) + "..." : title
-
   return (
     <article className="border shadow-sm rounded-xl py-5 px-3 mb-3 max-w-md mx-auto sm:m-0 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7] transition-all duration-200 hover:scale-95   ">
       <div className="flex justify-between items-center mb-3">
-        <h3 className="capitalize text-lg/5 font-bold basis-full">{newTitle}</h3>
+        <h3 className="capitalize text-lg/5 font-bold basis-full line-clamp-1 ">{title}</h3>
         <img src={`https://github.com/${gh}.png`} alt={`${gh}'s github profile`} className="h-10 w-10 rounded-full" />
       </div>
       <ul className="flex gap-2 mb-3 items-center">
         {tech.map((tag, i) => {
           let newTag = tag.length > maxLength_techtag ? tag.slice(0, maxLength_techtag) + "..." : tag
           return (
-            <li className="text-sm  bg-primary rounded-full text-white px-3 py-0.5" key={i}>
+            <li className="text-sm  bg-primary rounded-full text-white px-2 py-0.5 " key={i}>
               {newTag}
             </li>
           )

src/pages/ProjectsPage.jsx

@@ -1,11 +1,29 @@
-import React from "react"
+import React, { useState } from "react"
 import { ProjectCard } from "../components"
 import projects from "../DB/projects.json"
+import { paginate } from "../utils/paginate"
+
+const paginatedArr = paginate(projects)
 
 const ProjectsPage = () => {
+  const [page, setPage] = useState(0)
+
+  const currentItems = paginatedArr[page]
+
+  const prevPage = () => {
+    if (page - 1 < 0) {
+      setPage(paginatedArr.length - 1)
+      return
+    }
+    setPage(page - 1)
+  }
+
+  const nextPage = () => {
+    setPage((page + 1) % paginatedArr.length)
+  }
+
   return (
-    <main className=" my-8 min-h-[65.75vh] max-w-6xl w-11/12 mx-auto sm:min-h-[73vh] lg:min-h-[78vh]">
-      {/* As the number of cards may change, it is important to give a min-height to 'main' */}
+    <main className=" my-8  max-w-6xl w-11/12 mx-auto sm:my-10 ">
       <h1 className="text-[3.5rem] font-bold  text-center">
         List of <span className="text-primary">cool </span>Projects
       </h1>
@@ -20,11 +38,32 @@ const ProjectsPage = () => {
           Check documentation <span aria-hidden="true">→</span>
         </a>
       </p>
-      <section className="mt-7 sm:grid sm:grid-cols-2 sm:gap-x-3 sm:gap-y-3 sm:justify-items-center sm:items-center lg:grid-cols-3 lg:gap-x-5 lg:gap-y-5">
-        {projects.map((project, i) => (
+
+      {/* As the number of cards may change, it is important to give a min-height to 'section' */}
+      <section className="my-7 min-h-[34vh] sm:grid sm:grid-cols-2 sm:auto-rows-min sm:gap-x-2 sm:gap-y-4 sm:justify-items-center sm:items-center sm:min-h-[37vh] md:gap-x-3 md:min-h-[50vh] lg:grid-cols-3 lg:min-h-[60vh] xl:min-h-[70vh]">
+        {currentItems.map((project, i) => (
           <ProjectCard gh={project["gh-username"]} {...project} key={i} />
         ))}
       </section>
+      <div className=" py-5 flex gap-2 flex-wrap justify-center text-black ">
+        <button type="button" className="bg-white px-3 py-1 rounded-md " onClick={prevPage}>
+          Prev
+        </button>
+        {paginatedArr.map((ele, ind) => {
+          return (
+            <button
+              type="button"
+              className={`bg-white px-3 py-1  rounded-md ${page === ind ? "text-primary" : null}`}
+              onClick={() => setPage(ind)}
+            >
+              {ind + 1}
+            </button>
+          )
+        })}
+        <button type="button" className="bg-white px-3 py-1 rounded-md " onClick={nextPage}>
+          Next
+        </button>
+      </div>
     </main>
   )
 }

src/utils/paginate.js

@@ -0,0 +1,11 @@
+export const paginate = (followers) => {
+  const itemsPerPage = 9
+  const pages = Math.ceil(followers.length / itemsPerPage)
+
+  const newFollowers = Array.from({ length: pages }, (item, index) => {
+    let start = itemsPerPage * index
+    return followers.slice(start, start + itemsPerPage)
+  })
+
+  return newFollowers
+}