code changes

app/@header/default.js

@@ -19,7 +19,7 @@ export default function PageHeader({ searchParams }) {
     }
   };
 
-  const handleClose = () => {
+  const handleClear = () => {
     router.push(`/?page=${currentPage}`, undefined, { shallow: true });
   };
 
@@ -29,7 +29,7 @@ export default function PageHeader({ searchParams }) {
       currentTheme={theme}
       onThemeChange={toggleTheme}
       onSearch={handleSearch}
-      onClose={handleClose}
+      onClear={handleClear}
       value={urlParams}
     />
   );

app/page.js

@@ -4,35 +4,33 @@ import { getPosts, getPostsBySearch } from "@lib/api";
 import styles from "./page.module.css";
 
 const Home = async ({ searchParams }) => {
-  let blogs = [];
+  let blogs;
   let pageNo = searchParams.page || 1;
   let search = searchParams.search;
 
-  let response;
-  response = await getPosts("posts", pageNo);
-  blogs = response.data;
-
-  if ("search" in searchParams && pageNo !== "") {
+  if ("search" in searchParams) {
     if (search !== "") {
-      response = await getPostsBySearch("posts", pageNo, search);
-      blogs = response.data;
+      blogs = await getPostsBySearch("posts", pageNo, search);
     } else {
-      blogs.length = 0;
+      blogs.data.length = 0;
     }
+  } else {
+    blogs = await getPosts("posts", pageNo);
   }
+
   return (
     <div className={styles.container}>
-      {blogs?.length ? (
+      {blogs.data?.length ? (
         <div>
           <BlogLists
             title="Lifestyle"
             description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
-            blogs={blogs}
+            blogs={blogs.data}
           />
           <div className={styles.pagination}>
             <Pagination
               currentPage={Number(pageNo)}
-              total={Number(response.total)}
+              total={Number(blogs.total)}
               perPage={6}
               search={search}
             />

components/base/card/card.stories.js

@@ -10,10 +10,12 @@ export const card = {
     title: "How to get a perfect start for beginning runners",
     description:
       "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-    image: {
-      url: require("@img/lifestyle1.jpg").default.src,
-      width: 470,
-      height: 300,
+    images: {
+      card: {
+        url: require("@img/lifestyle1.jpg").default.src,
+        width: 470,
+        height: 300,
+      },
     },
     publishedDate: "July 13, 2020.",
     author: {

components/base/card/index.js

@@ -8,7 +8,7 @@ const Card = ({
   id,
   title,
   description,
-  image,
+  images,
   publishedDate,
   author,
   readingTime,
@@ -19,9 +19,9 @@ const Card = ({
         <Link href={`singleblog/${id}`}>
           <Image
             className={styles.img}
-            src={image.url}
-            height={image.height}
-            width={image.width}
+            src={images.card.url}
+            height={images.card.height}
+            width={images.card.width}
             loading="eager"
             alt={title}
           />
@@ -57,10 +57,12 @@ const Card = ({
 Card.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
-  image: PropTypes.shape({
-    url: PropTypes.string,
-    height: PropTypes.number,
-    width: PropTypes.number,
+  images: PropTypes.shape({
+    card: PropTypes.shape({
+      url: PropTypes.string,
+      height: PropTypes.number,
+      width: PropTypes.number,
+    }),
   }),
   publishedDate: PropTypes.string,
   author: PropTypes.shape({

components/base/header/index.js

@@ -8,7 +8,7 @@ function Header({
   name,
   currentTheme,
   onSearch,
-  onClose,
+  onClear,
   onThemeChange,
   value,
 }) {
@@ -18,15 +18,15 @@ function Header({
   const handleSearch = (value) => {
     onSearch(value);
   };
-  const handleClose = () => {
-    onClose("");
+  const handleClear = () => {
+    onClear("");
   };
 
   return (
     <header className={styles.header}>
       <div className={styles.container}>
         <nav className={styles.navbar}>
-          <Link className={styles["navbar-brand"]} href={`/?page=1`}>
+          <Link className={styles["navbar-brand"]} href="/">
             <Icons name="newspaper" size="large" classes="newspaper-icon" />
             <h3>{name}</h3>
           </Link>
@@ -34,7 +34,7 @@ function Header({
           <div className={styles.search}>
             <Search
               onSearch={handleSearch}
-              onClose={handleClose}
+              onClear={handleClear}
               value={value}
             />
           </div>

components/base/search/index.js

@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
 import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 
-const Search = ({ onSearch, onClose, value }) => {
+const Search = ({ onSearch, onClear, value }) => {
   const [inputValue, setInputValue] = useState(value);
 
   const handleCustomClear = () => {
-    onClose("");
+    onClear("");
     setInputValue(""); // Reset the input value
   };
 
@@ -46,7 +46,7 @@ const Search = ({ onSearch, onClose, value }) => {
 
 Search.propTypes = {
   onSearch: PropTypes.func,
-  onClose: PropTypes.func,
+  onClear: PropTypes.func,
 };
 
 export default Search;

components/base/search/search.stories.js

@@ -4,7 +4,7 @@ export default {
   component: Search,
   argTypes: {
     onSearch: { actions: "onSearch" },
-    onClose: { actions: "onClose" },
+    onClear: { actions: "onClear" },
   },
 };
 export const search = {};

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

@@ -14,10 +14,12 @@ export const blogLists = {
         title: "How to get perfect start for beginning runners",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle1.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle1.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {
@@ -36,10 +38,12 @@ export const blogLists = {
         title: "Great tools to improve your personal blogging experience",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle2.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle2.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
 
         publishedDate: "July 13, 2020.",
@@ -59,10 +63,12 @@ export const blogLists = {
         title: "Blog Guide: How to Start a Personal blog on WordPress",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle3.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle3.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {
@@ -81,10 +87,12 @@ export const blogLists = {
         title: "The technical setup when starting a personal blog",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle4.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle4.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {
@@ -102,10 +110,12 @@ export const blogLists = {
         title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle5.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle5.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {
@@ -124,10 +134,12 @@ export const blogLists = {
         title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle6.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle6.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {
@@ -145,10 +157,12 @@ export const blogLists = {
         title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle6.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle6.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {
@@ -166,10 +180,12 @@ export const blogLists = {
         title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle6.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle6.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {
@@ -187,10 +203,12 @@ export const blogLists = {
         title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
         description:
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-        image: {
-          url: require("@img/lifestyle6.jpg").default.src,
-          width: 470,
-          height: 300,
+        images: {
+          card: {
+            url: require("@img/lifestyle6.jpg").default.src,
+            width: 470,
+            height: 300,
+          },
         },
         publishedDate: "July 13, 2020.",
         author: {

components/top-level/pagination/index.js

@@ -2,10 +2,8 @@ import PropTypes from "prop-types";
 import Button from "@components/base/button";
 import styles from "./styles.module.css";
 
-function Pagination({ total, currentPage, perPage, search }) {
-  const totalPages = Math.ceil(total / perPage);
-  const totalPage = totalPages <= 1 ? 1 : totalPages;
-
+function Pagination({ total, currentPage, search }) {
+  const totalPage = total <= 1 ? 1 : total;
   const numberOfPages = [];
   for (let i = 1; i <= totalPage; i++) {
     numberOfPages.push(i);
@@ -89,8 +87,7 @@ function Pagination({ total, currentPage, perPage, search }) {
 
 Pagination.propTypes = {
   total: PropTypes.number.isRequired,
-  currentPage: PropTypes.number,
-  onPageChange: PropTypes.func,
+  currentPage: PropTypes.number.isRequired,
 };
 
 export default Pagination;

components/top-level/pagination/pagination.stories.js

@@ -2,15 +2,12 @@ import Pagination from "@components/top-level/pagination/index";
 export default {
   title: "Top-Level/Pagination",
   component: Pagination,
-  argTypes: {
-    onPageChange: { actions: "onPageChange" },
-  },
+  argTypes: {},
 };
 
 export const pagination = {
   args: {
     total: 10,
     currentPage: 1,
-    perPage: 2,
   },
 };

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

@@ -8,7 +8,7 @@ function SingleBlog({
   title,
   publishedDate,
   author,
-  blogImage,
+  images,
   category,
   readingTime,
   categories,
@@ -49,10 +49,10 @@ function SingleBlog({
         <div className={styles.blogImage}>
           <Image
             className={styles.img}
-            src={blogImage.url}
+            src={images.banner.url}
             alt={author.name}
-            width={blogImage.width}
-            height={blogImage.height}
+            width={images.banner.width}
+            height={images.banner.height}
           />
         </div>
         <div className={styles.blogContent}>

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

@@ -10,10 +10,12 @@ export const singleBlog = {
     author: {
       name: "Charlotte mia",
     },
-    blogImage: {
-      url: require("@img/blogsingle.jpg").default.src,
-      width: 1920,
-      height: 500,
+    images: {
+      banner: {
+        url: require("@img/blogsingle.jpg").default.src,
+        width: 1920,
+        height: 500,
+      },
     },
 
     category: "Fashion",

context/index.js

@@ -7,7 +7,6 @@ export const useAppContext = () => useContext(ThemeContext);
 
 export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState("light");
-  const [input, setInput] = useState("");
 
   useEffect(() => {
     const storedTheme = localStorage.getItem("theme") || "light";
@@ -25,8 +24,6 @@ export const ThemeProvider = ({ children }) => {
   const contextValue = {
     theme,
     toggleTheme,
-    input,
-    setInput,
   };
 
   return (

lib/api.js

@@ -59,7 +59,9 @@ function getSlicedPost(post, page) {
   const slicedData = Array.isArray(post)
     ? post.slice(startIndex, endIndex)
     : [];
-  const response = { data: slicedData, total: post?.length };
+  const totalPages = Math.ceil(post?.length / itemsPerPage);
+
+  const response = { data: slicedData, total: totalPages };
 
   return response;
 }

posts/blog1.md

 ---
 id: 1
-image: { url: "/images/lifestyle1.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle1.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "How to get a perfect start for beginning runners"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -12,7 +16,6 @@ publishedDate: "2023-05-14."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog2.md

 ---
 id: 2
-image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle2.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "Great tools to improve your personal blogging experience"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -12,7 +16,6 @@ publishedDate: "2023-03-24."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog3.md

 ---
 id: 3
-image: { url: "/images/lifestyle3.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle3.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "Blog Guide: How to Start a Personal Blog on WordPress"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -12,7 +16,6 @@ publishedDate: "2023-07-18."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog4.md

 ---
 id: 4
-image: { url: "/images/lifestyle4.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle4.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "The technical setup when starting a personal blog"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -12,7 +16,6 @@ publishedDate: "2023-07-12."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog5.md

 ---
 id: 5
-image: { url: "/images/lifestyle5.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle5.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -9,7 +13,6 @@ publishedDate: "2023-01-09."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog6.md

 ---
 id: 6
-image: { url: "/images/lifestyle6.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle6.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "Blog Guide: How to Start a Personal Blog on WordPress"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -12,7 +16,6 @@ publishedDate: "2023-09-20."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog7.md

 ---
 id: 7
-image: { url: "/images/lifestyle7.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle7.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "How to get a perfect start for beginning runners"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -9,7 +13,6 @@ publishedDate: "2023-08-28."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog8.md

 ---
 id: 8
-image: { url: "/images/lifestyle8.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle8.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "Great tools to improve your personal blogging experience"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -9,7 +13,6 @@ publishedDate: "2023-02-16."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.

posts/blog9.md

 ---
 id: 9
-image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
+images:
+  {
+    card: { url: "/images/lifestyle2.jpg", width: 470, height: 300 },
+    banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
+  }
 title: "How to get a perfect start for beginning runners"
 description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
@@ -12,7 +16,6 @@ publishedDate: "2023-10-11."
 readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
-blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
 ### How to create an Art that shows the beauty in everyone ideas of flaws.