pagination issue

.storybook/preview.js

@@ -23,7 +23,9 @@ const preview = {
 
 export const decorators = [
   (Story) => {
-    return <Story themeMode={useDarkMode()} />;
+
+    const currentTheme = useDarkMode() ? "light" : "dark";
+    return <Story theme={currentTheme} />;
   },
 ];
 

.vscode/settings.json

+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true
+}
\ No newline at end of file

app/globals.css

@@ -25,14 +25,12 @@
   --font-color-300: #718096;
   --title-color: #2d3748;
   --bg-color: #f8f9fa;
+  --input-bg: #f4f4f4;
   --card-bg: #fff;
   --heading-color: #2d3748;
   --border-radius: 6px;
   --border-radius-full: 15px;
   --border-color: transparent;
-  --nav-color: #292922;
-  --dropdown-color: #fff;
-  --iframe-filter: grayscale(0%);
   --bg-grey: #f4f4f4;
   --bg-lightgrey: #f8f9fa;
   --btn-bg: #e2e8f0;
@@ -40,12 +38,13 @@
 }
 .dark {
   --bg-color: black;
+  --input-bg: black;
   --card-bg: #131617;
   --font-color-300: #b7b7b7;
   --font-color-900: #fff;
   --title-color: #fff;
   --font-color-700: #fff;
-
+  --border-color: rgba(255, 255, 255, 0.2);
   --primary-bgcolor: #5a67d8;
   --secondary-bgcolor: #131617;
   --primary-color: #fff;
@@ -95,6 +94,10 @@ h6 {
   font-family: "Libre Baskerville", serif;
   margin: 20px 0px;
 }
+p {
+  font-size: 18px;
+  line-height: 28px;
+}
 
 .icon-container {
   display: flex;

components/base/button/button.stories.js

@@ -9,5 +9,6 @@ export const button = {
   args: {
     variant: "primary",
     children: "Button",
+    isDisabled: false,
   },
 };

components/base/button/index.js

@@ -2,10 +2,11 @@ import PropTypes from "prop-types";
 import cn from "classnames";
 import styles from "./styles.module.css";
 
-const Button = ({ children, variant, className, ...props }) => {
+const Button = ({ children, isDisabled, variant, className, ...props }) => {
   const classNames = cn({
     [styles[variant]]: variant,
     [styles[className]]: className,
+    [styles.disabled]: isDisabled === true,
   });
 
   return (
@@ -16,7 +17,9 @@ const Button = ({ children, variant, className, ...props }) => {
 };
 
 Button.propTypes = {
-  variant: PropTypes.oneOf(["primary", "secondary", "disabled"]),
+  variant: PropTypes.oneOf(["primary", "secondary"]),
+  children: PropTypes.element,
+  isDisabled: PropTypes.bool,
 };
 
 export default Button;

components/base/button/styles.module.css

@@ -17,27 +17,5 @@ button {
 }
 .disabled {
   opacity: 0.7;
-  background-color: var(--secondary-bgcolor);
-  color: var(--secondary-color);
-}
-/* button .active {
-  background: #5a67d8;
-  color: #fff;
-  border: 1px solid #7cbddb;
-  border-radius: 10px;
-  font-size: 14px;
-  font-weight: bold;
-} */
-/* 
-button.secondary:hover:not(.active) {
-  color: var(--font-color-900);
-}
-button .disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
+  /* background-color: var(--secondary-bgcolor); */
 }
-
-button:hover:is(.no-cursor) {
-  cursor: not-allowed;
-  user-select: none;
-} */

components/base/card/styles.module.css

@@ -7,7 +7,8 @@
   word-wrap: break-word;
   &:hover {
     transform: translateY(-10px);
-    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px -1px,
+      rgba(0, 0, 0, 0.06) 0px 2px 8px -1px;
   }
   .img {
     max-width: 100%;

components/base/header/header.stories.js

 import Header from ".";
-import { ThemeProvider } from "@/app/context/index";
 export default {
   title: "Base/Header",
   component: Header,
-  decorators: [
-    (Story) => (
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
   argTypes: {
     onThemeChange: { actions: "onThemeChange" },
     onSearch: { actions: "onSearch" },
@@ -21,4 +13,7 @@ export const header = {
   args: {
     name: "NewsBlog",
   },
+  render: (args, { theme }) => {
+    return <Header currentTheme={theme} {...args} />;
+  },
 };

components/base/header/index.js

 import Link from "next/link";
 import Search from "@components/base/search";
 import Icons from "@components/base/icons";
-import { useTheme } from "@context/index";
 import styles from "./styles.module.css";
+import PropTypes from "prop-types";
 
-function Header({ name, onThemeChange, onSearch, onClose }) {
-  const { theme, toggleTheme } = useTheme();
-
+function Header({ name, currentTheme, onThemeChange, onSearch, onClose }) {
   const handleTheme = () => {
-    toggleTheme();
-    onThemeChange(theme);
+    onThemeChange(currentTheme);
   };
   const handleSearch = (value) => {
     onSearch(value);
@@ -31,12 +28,19 @@ function Header({ name, onThemeChange, onSearch, onClose }) {
           </div>
 
           <div onClick={handleTheme} className={styles.themelight}>
-            <Icons name={theme == "light" ? "moon" : "sun"} size="medium" />
+            <Icons
+              name={currentTheme === "light" ? "sun" : "moon"}
+              size="medium"
+            />
           </div>
         </nav>
       </div>
     </header>
   );
 }
+Header.propTypes = {
+  name: PropTypes.string,
+  onThemeChange: PropTypes.func,
+};
 
 export default Header;

components/base/icons/icons.stories.js

@@ -4,15 +4,7 @@ export default {
   title: "Base/Icons",
   component: Icons,
 };
-const iconList = [
-  "close",
-  "search",
-  "clock",
-  "sun",
-  "moon",
-  "newspaper",
-  "hamburger",
-];
+const iconList = ["close", "search", "clock", "sun", "moon", "newspaper"];
 export const icons = () => {
   return (
     <div className="icon-container">

components/base/icons/index.js

@@ -82,17 +82,17 @@ const Icons = ({ name, size, classes }) => {
         <path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z" />
       </svg>
     ),
-    hamburger: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        height="1.3em"
-        fill="currentColor"
-        viewBox="0 0 448 512"
-        stroke="currentColor"
-      >
-        <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
-      </svg>
-    ),
+    // hamburger: (
+    //   <svg
+    //     xmlns="http://www.w3.org/2000/svg"
+    //     height="1.3em"
+    //     fill="currentColor"
+    //     viewBox="0 0 448 512"
+    //     stroke="currentColor"
+    //   >
+    //     <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
+    //   </svg>
+    // ),
   };
   const classNames = cn({
     [styles[classes]]: classes,
@@ -108,7 +108,6 @@ Icons.propTypes = {
     "close",
     "search",
     "clock",
-    "hamburger",
     "newspaper",
   ]),
 };

components/base/icons/styles.module.css

 .small svg {
   height: 20px;
   width: 20px;
+  color: var(--font-color-300);
 }
 .medium svg {
   height: 38px;
   width: 38px;
+  color: var(--font-color-300);
 }
 
 /* .search svg,

components/base/search/styles.module.css

@@ -3,17 +3,20 @@
   position: relative;
   display: inline-block;
   border-radius: 3px;
-border: 1px solid #00000000;
+
   .search-input {
   height: 48px;
   width: 30vw;
-  background: #f4f4f4;
-  border: none;
-  outline: none;
+  background: var(--input-bg);
+  border-radius: 5px;
+  border: .5px solid var(--border-color);
+  outline:none;
   padding-left: 3rem;
   font-size: 16px;
-  .search-input::placeholder{
+  &::placeholder{
     color: #718096;
+    font-weight: 600;
+    color: var(--font-color-300);
   }
 }
 .search-icon {
@@ -21,7 +24,7 @@ border: 1px solid #00000000;
   top: 14px;
 
   padding-left: 17px;
-  color: #718096;
+     color: var(--font-color-300);
 }
 
 .close-icon {

components/top-level/blog-lists/index.js

@@ -17,6 +17,7 @@ const BlogLists = ({ title, description, blogs }) => {
   // Handle page change
   const handlePageChange = (pageNumber) => {
     setCurrentPage(pageNumber);
+    window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   return (

components/top-level/blog-lists/styles.module.css

@@ -11,7 +11,7 @@
 .description {
   color: var(--font-color-300);
   padding-inline: 1.5rem;
-  margin-bottom: 3em;
+  margin-bottom: 2em;
 }
 .row {
   display: grid;

components/top-level/pagination/index.js

@@ -6,7 +6,7 @@ import styles from "./styles.module.css";
 function Pagination({ total, currentPage, onPageChange, perPage }) {
   //Set number of pages
   const numberOfPages = [];
-  const totalPages = Math.round(total / perPage);
+  const totalPages = Math.ceil(total / perPage);
 
   const totalPage = totalPages <= 1 ? 1 : totalPages;
   for (let i = 1; i <= totalPage; i++) {
@@ -68,7 +68,8 @@ function Pagination({ total, currentPage, onPageChange, perPage }) {
     <div className={styles["pagination-container"]}>
       <span className={styles.previous}>
         <Button
-          variant={currentButton <= 1 ? "disabled" : "secondary"}
+          variant="secondary"
+          isDisabled={currentButton <= 1 ? true : false}
           onClick={() =>
             currentButton <= 1 ? "" : handleCurrentPage(currentButton - 1)
           }
@@ -91,9 +92,8 @@ function Pagination({ total, currentPage, onPageChange, perPage }) {
       })}
       <span className={styles.next}>
         <Button
-          variant={
-            currentButton === numberOfPages.length ? "disabled" : "secondary"
-          }
+          variant="secondary"
+          isDisabled={currentButton === numberOfPages.length ? true : false}
           onClick={() =>
             currentButton === numberOfPages.length
               ? ""

components/top-level/single-blog/index.js

@@ -57,7 +57,7 @@ function SingleBlog({
         <div className={styles["blog-content"]}>
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
           <div className={styles.tag}>
-            <h3>Tags:</h3>
+            <span>Tags:</span>
             {categories.map((e, i) => (
               <p key={i}>{e}</p>
             ))}
@@ -82,5 +82,6 @@ SingleBlog.propTypes = {
   category: PropTypes.string,
   readingTime: PropTypes.string,
   categories: PropTypes.array,
+  markdown: PropTypes.any,
 };
 export default SingleBlog;

components/top-level/single-blog/styles.module.css

@@ -51,13 +51,17 @@ blockquote p {
   display: flex;
   align-items: center;
   gap: 0.2rem;
-}
-.tag p {
-  background: #e2e8f0;
-  padding: 0.3em 1em;
-  border-radius: 40px;
-  color: #718096;
-  font-weight: bold;
+  > p {
+    background: #e2e8f0;
+    padding: 0.3em 1em;
+    border-radius: 40px;
+    color: #718096;
+    font-weight: 400;
+  }
+  > span {
+    font-weight: bold;
+    font-size: 20px;
+  }
 }
 
 .tag p:hover {