added pagination

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "christian-kohler.path-intellisense",
+        "bradlc.vscode-tailwindcss",
+        "bracketpaircolordlw.bracket-pair-color-dlw",
+    ]
+}

.vscode/settings.json

@@ -2,10 +2,6 @@
     "emmet.includeLanguages": {
         "javascript": "javascriptreact"
     },
-    "workbench.colorCustomizations": {
-        "titleBar.activeBackground": "#d52bff",
-        "titleBar.activeForeground":"#000000",
-    },
     "files.exclude": {
         "**/node_modules": true
     }

pages/blog/index.tsx

@@ -1,40 +1,83 @@
 import ArticleCard from "../../src/components/ArticleCards/ArticleCard";
-import { SORTED_ARTICLES_BY_DATE } from '../../BLOG_CONSTANTS/_ARTICLES_LIST';
+import { SORTED_ARTICLES_BY_DATE } from "../../BLOG_CONSTANTS/_ARTICLES_LIST";
 import { useRouter } from "next/router";
 import { PageLayout } from "../../src/components";
 import { combineClasses } from "../../src/utils/utils";
+import ReactPaginate from "react-paginate";
+import { useEffect, useState } from "react";
+import { iArticle } from "../../src/shared/interfaces";
+import { AiFillCaretRight, AiFillCaretLeft } from "react-icons/ai";
 
 const Categories = () => {
-    const router = useRouter()
-    const { category, author } = router.query;
-    const categoryArticles = SORTED_ARTICLES_BY_DATE.filter((each) => each.preview.category === category);
-    const authorArticles = SORTED_ARTICLES_BY_DATE.filter((each) => each.preview.author.name === author);
-    const articles = category ?
-        categoryArticles :
-        author ? authorArticles :
-            SORTED_ARTICLES_BY_DATE;
-
-    return (
-        <PageLayout home>
-            <div className={combineClasses("container mt-10 md:pt-0 px-0 md:px-3", category ? 'pt-10' : 'pt-14')}>
-                {
-                    category || author ?
-                        <h1 className='px-2 mb-[30px] text-[45px] font-bold' style={{ textTransform: 'capitalize' }}>
-                            {category || author}
-                            <hr className='mt-[10px]' />
-                        </h1> : null
-                }
-
-                <div className='flex flex-wrap'>
-                    {
-                        articles.map((each, i) => (
-                            <ArticleCard article={each.preview} path={each.path} key={i} />
-                        ))
-                    }
-                </div>
-            </div>
-        </PageLayout>
-    )
-}
-
-export default Categories
+  const router = useRouter();
+  const { category, author } = router.query;
+  const categoryArticles = SORTED_ARTICLES_BY_DATE.filter(
+    (each) => each.preview.category === category
+  );
+  const authorArticles = SORTED_ARTICLES_BY_DATE.filter(
+    (each) => each.preview.author.name === author
+  );
+  const articles = category
+    ? categoryArticles
+    : author
+    ? authorArticles
+    : SORTED_ARTICLES_BY_DATE;
+
+  const [currentItems, setCurrentItems] = useState([] || null);
+  const [pageCount, setPageCount] = useState(0);
+  const [itemOffset, setItemOffset] = useState(0);
+  const itemsPerPage = 1;
+
+  useEffect(() => {
+    const endOffset = itemOffset + itemsPerPage;
+    setCurrentItems(articles.slice(itemOffset, endOffset) as any);
+    setPageCount(Math.ceil(articles.length / itemsPerPage));
+  }, [itemOffset, itemsPerPage]);
+
+  const handlePageClick = (event: any) => {
+    const newOffset = (event.selected * itemsPerPage) % articles.length;
+    setItemOffset(newOffset);
+  };
+
+  return (
+    <PageLayout home>
+      <div
+        className={combineClasses(
+          "container mt-10 md:pt-0 px-0 md:px-3",
+          category ? "pt-10" : "pt-14"
+        )}
+      >
+        {category || author ? (
+          <h1
+            className="px-2 mb-[30px] text-[45px] font-bold"
+            style={{ textTransform: "capitalize" }}
+          >
+            {category || author}
+            <hr className="mt-[10px]" />
+          </h1>
+        ) : null}
+
+        <div className="flex flex-wrap">
+          {currentItems
+            ? (currentItems as any).map((each: iArticle, i: any) => (
+                <ArticleCard article={each.preview} path={each.path} key={i} />
+              ))
+            : null}
+        </div>
+
+        <ReactPaginate
+          breakLabel="..."
+          nextLabel={<AiFillCaretRight />}
+          onPageChange={handlePageClick}
+          pageRangeDisplayed={1}
+          pageCount={pageCount}
+          previousLabel={<AiFillCaretLeft />}
+          containerClassName="pagination"
+          activeClassName="active"
+        />
+      </div>
+    </PageLayout>
+  );
+};
+
+export default Categories;

pages/index.tsx

@@ -42,13 +42,6 @@ const Home = () => {
           <h1 className='px-3 w-full mb-5 text-xl md:text-3xl font-medium'>Checkout the below articles on how to use different layouts and components</h1>
           <hr className='border-1 mb-5 w-[98%] mx-auto' />
           <HomeNonFeatureArticles />
-          {/* {
-            SORTED_ARTICLES_BY_DATE.slice(0, 10).map((each, i) => (
-              !each.featureArticle ?
-                <ArticleCard article={each.preview} path={each.path} key={i} />
-                : null
-            ))
-          } */}
         </div>
       </div>
     </PageLayout>

src/components/Misc/HomeNonFeatureAricles.tsx

@@ -5,7 +5,7 @@ import LinkTo from "../LinkTo";
 
 const HomeNonFeatureArticles = () => {
     const restArticles = SORTED_ARTICLES_BY_DATE.filter((article: iArticle) => !article.featureArticle);
-    const articlesToDisplay = 5;
+    const articlesToDisplay = 9;
     return (
         <>
             {

src/styles/globals.scss

@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
 
-@import './utils/mixins';
+@import "./utils/mixins";
 
 @tailwind base;
 @tailwind components;
@@ -12,14 +12,14 @@ body {
   margin: 0;
   width: 100%;
   height: 100%;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
 a {
   color: inherit;
   text-decoration: none;
 
-  &:hover{
+  &:hover {
     @apply text-blue-600;
   }
 }
@@ -34,7 +34,7 @@ a {
   -webkit-box-orient: vertical;
 }
 
-.no-scroll{
+.no-scroll {
   overflow: hidden;
 }
 
@@ -50,7 +50,7 @@ a {
   z-index: 12;
 }
 
-hr{
+hr {
   background: none;
   border: none;
   border-top: solid 1px;
@@ -59,17 +59,63 @@ hr{
 
 @-webkit-keyframes fadeIn {
   0% {
-      opacity: 0;
+    opacity: 0;
   }
   100% {
-      opacity: 0.4;
+    opacity: 0.4;
   }
 }
 @keyframes fadeIn {
   0% {
-      opacity: 0;
+    opacity: 0;
   }
   100% {
-      opacity: 0.4;
+    opacity: 0.4;
   }
-}
+}
+
+// react pagination
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 15px;
+
+  .previous,
+  .next {
+    font-size: 22px;
+    @apply bg-blue-500 p-2 rounded-full text-white;
+    margin: 0px 10px;
+
+    a:hover {
+      @apply text-blue-200;
+    }
+
+    &.disabled {
+      @apply pointer-events-none bg-gray-500;
+    }
+  }
+
+  li {
+    margin: 0px 10px;
+    position: relative;
+
+    &::before {
+      content: "";
+      width: 5px;
+      height: 5px;
+      @apply bg-blue-500 rounded-full;
+      position: absolute;
+      bottom: -5px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: none;
+    }
+
+    &.active{
+      &::before {
+        display: block;
+      }
+    }
+  }
+}