diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..a918561 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "esbenp.prettier-vscode", + "christian-kohler.path-intellisense", + "bradlc.vscode-tailwindcss", + "bracketpaircolordlw.bracket-pair-color-dlw", + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index aef4380..fd0336a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,10 +2,6 @@ "emmet.includeLanguages": { "javascript": "javascriptreact" }, - "workbench.colorCustomizations": { - "titleBar.activeBackground": "#d52bff", - "titleBar.activeForeground":"#000000", - }, "files.exclude": { "**/node_modules": true } diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index 6bfb76a..0b9b5f8 100644 --- a/pages/blog/index.tsx +++ b/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 ( - -
- { - category || author ? -

- {category || author} -
-

: null - } - -
- { - articles.map((each, i) => ( - - )) - } -
-
- - ) -} - -export default Categories \ No newline at end of file + 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 ( + +
+ {category || author ? ( +

+ {category || author} +
+

+ ) : null} + +
+ {currentItems + ? (currentItems as any).map((each: iArticle, i: any) => ( + + )) + : null} +
+ + } + onPageChange={handlePageClick} + pageRangeDisplayed={1} + pageCount={pageCount} + previousLabel={} + containerClassName="pagination" + activeClassName="active" + /> +
+ + ); +}; + +export default Categories; diff --git a/pages/index.tsx b/pages/index.tsx index cdd189c..1ed50cc 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -42,13 +42,6 @@ const Home = () => {

Checkout the below articles on how to use different layouts and components

- {/* { - SORTED_ARTICLES_BY_DATE.slice(0, 10).map((each, i) => ( - !each.featureArticle ? - - : null - )) - } */} diff --git a/src/components/Misc/HomeNonFeatureAricles.tsx b/src/components/Misc/HomeNonFeatureAricles.tsx index 98650ac..d4dffae 100644 --- a/src/components/Misc/HomeNonFeatureAricles.tsx +++ b/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 ( <> { diff --git a/src/styles/globals.scss b/src/styles/globals.scss index e5ad98f..2ff1277 100644 --- a/src/styles/globals.scss +++ b/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; } -} \ No newline at end of file +} + +// 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; + } + } + } +}