extract search from url

.storybook/preview.js

 /** @type { import('@storybook/react').Preview } */
-import "../app/globals.css";
+import "@styles/globals.css";
 import { useDarkMode } from "storybook-dark-mode";
 import { themes } from "@storybook/theming";
 import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS

app/@header/default.js

@@ -3,10 +3,11 @@ import Header from "@components/base/header";
 import { useAppContext } from "@context/index";
 import { useRouter } from "next/navigation";
 
-export default function PageHeader() {
+export default function PageHeader({ searchParams }) {
   const { theme, toggleTheme } = useAppContext();
   const router = useRouter();
   let currentPage = 1;
+  const urlParams = searchParams.search;
 
   const handleSearch = (value) => {
     if (value) {
@@ -29,6 +30,7 @@ export default function PageHeader() {
       onThemeChange={toggleTheme}
       onSearch={handleSearch}
       onClose={handleClose}
+      value={urlParams}
     />
   );
 }

app/page.js

 import BlogLists from "@components/top-level/blog-lists";
+import Pagination from "@components/top-level/pagination";
 import { getPosts, getPostsBySearch } from "@lib/api";
 import styles from "./page.module.css";
 
 const Home = async ({ searchParams }) => {
   let blogs = [];
-  let pageNo = searchParams.page;
+  let pageNo = searchParams.page || 1;
   let search = searchParams.search;
 
   let response;
@@ -13,7 +14,6 @@ const Home = async ({ searchParams }) => {
 
   if ("search" in searchParams && pageNo !== "") {
     if (search !== "") {
-      console.log("dfknb", pageNo);
       response = await getPostsBySearch("posts", pageNo, search);
       blogs = response.data;
     } else {
@@ -23,14 +23,21 @@ const Home = async ({ searchParams }) => {
   return (
     <div className={styles.container}>
       {blogs?.length ? (
-        <BlogLists
-          title="Lifestyle"
-          description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
-          blogs={blogs}
-          total={response.total}
-          currentPage={Number(pageNo)}
-          search={search}
-        />
+        <div>
+          <BlogLists
+            title="Lifestyle"
+            description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
+            blogs={blogs}
+          />
+          <div className={styles.pagination}>
+            <Pagination
+              currentPage={Number(pageNo)}
+              total={Number(response.total)}
+              perPage={6}
+              search={search}
+            />
+          </div>
+        </div>
       ) : (
         <h2 className="center">No data found</h2>
       )}

app/page.module.css

 .container {
   padding-top: 1rem;
 }
+.pagination {
+  margin-block: 2rem;
+}

components/base/button/button.stories.js

@@ -8,7 +8,9 @@ export default {
 export const button = {
   args: {
     variant: "primary",
-    children: "Button",
-    isDisabled: false,
+    disabled: false,
+  },
+  render: (args) => {
+    return <Button {...args}>Button</Button>;
   },
 };

components/base/button/index.js

@@ -4,11 +4,10 @@ import cn from "classnames";
 import styles from "./styles.module.css";
 
 const Button = ({
-  children,
   disabled = false,
   variant,
+  children,
   className,
-  href,
   ...props
 }) => {
   const classNames = cn(styles["btn"], {
@@ -17,17 +16,20 @@ const Button = ({
     [styles.disabled]: disabled,
   });
 
-  return (
-    <Link href={href} className={classNames} {...props}>
+  return props.href != undefined ? (
+    <Link className={classNames} {...props}>
       {children}
     </Link>
+  ) : (
+    <button className={classNames} {...props}>
+      {children}
+    </button>
   );
 };
 
 Button.propTypes = {
   variant: PropTypes.oneOf(["primary", "secondary"]),
-  children: PropTypes.any,
-  isDisabled: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 export default Button;

components/base/card/card.stories.js

@@ -26,7 +26,4 @@ export const card = {
     },
     readingTime: "1 min",
   },
-  render: (args) => {
-    return <Card {...args} />;
-  },
 };

components/base/card/styles.module.css

@@ -55,6 +55,7 @@
   font-size: 18px;
   font-weight: 500;
   line-height: 0;
+  color: var(--font-color-900);
 }
 .card-content .card-author .authordescription .author-desc {
   display: flex;
@@ -82,7 +83,7 @@
 
 @media screen and (min-width: 768px) {
   .card {
-    width: min(90%, 25rem);
+    width: min(100%, 22rem);
   }
   .card-content .card-author .authordescription .author-desc {
     font-size: clamp(0.8rem, 0.5rem + 1vw, 1rem);

components/base/header/index.js

@@ -4,7 +4,14 @@ import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 import PropTypes from "prop-types";
 
-function Header({ name, currentTheme, onSearch, onClose, onThemeChange }) {
+function Header({
+  name,
+  currentTheme,
+  onSearch,
+  onClose,
+  onThemeChange,
+  value,
+}) {
   const handleTheme = () => {
     onThemeChange(currentTheme);
   };
@@ -20,18 +27,22 @@ function Header({ name, currentTheme, onSearch, onClose, onThemeChange }) {
       <div className={styles.container}>
         <nav className={styles.navbar}>
           <Link className={styles["navbar-brand"]} href={`/?page=1`}>
-            <Icons name="newspaper" size="medium" classes="newspaper-icon" />
+            <Icons name="newspaper" size="large" classes="newspaper-icon" />
             <h3>{name}</h3>
           </Link>
 
           <div className={styles.search}>
-            <Search onSearch={handleSearch} onClose={handleClose} />
+            <Search
+              onSearch={handleSearch}
+              onClose={handleClose}
+              value={value}
+            />
           </div>
 
           <div onClick={handleTheme} className={styles.themeLight}>
             <Icons
               name={currentTheme === "light" ? "sun" : "moon"}
-              size="medium"
+              size="large"
             />
           </div>
         </nav>

components/base/icons/icons.stories.js

@@ -9,7 +9,7 @@ export const icons = () => {
   return (
     <div className="icon-container">
       {iconList.map((e, i) => (
-        <div key={i}>{<Icons name={e} size="small" />}</div>
+        <div key={i}>{<Icons name={e} size="medium" />}</div>
       ))}
     </div>
   );

components/base/icons/styles.module.css

@@ -4,6 +4,11 @@
   color: var(--font-color-300);
 }
 .medium svg {
+  height: 24px;
+  width: 24px;
+  color: var(--font-color-300);
+}
+.large svg {
   height: 38px;
   width: 38px;
   color: var(--font-color-300);

components/base/search/index.js

-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { useSearchParams } from "next/navigation";
 import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 
-const Search = ({ onSearch, onClose }) => {
-  const searchParams = useSearchParams();
-  const search = searchParams.get("search") || "";
-  const [inputValue, setInputValue] = useState(search);
-
-  useEffect(() => {
-    setInputValue(search);
-  }, [search]);
+const Search = ({ onSearch, onClose, value }) => {
+  const [inputValue, setInputValue] = useState(value);
 
   const handleCustomClear = () => {
     onClose("");

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

 import PropTypes from "prop-types";
 import Card from "@components/base/card";
-import Pagination from "@components/top-level/pagination";
 import styles from "./styles.module.css";
 
-const BlogLists = ({
-  title,
-  description,
-  blogs,
-  currentPage,
-  total,
-  search,
-}) => {
+const BlogLists = ({ title, description, blogs }) => {
   return (
     <div className={styles["blog-container"]}>
       <h2 className={styles.title}>{title}</h2>
@@ -22,14 +14,6 @@ const BlogLists = ({
           </div>
         ))}
       </div>
-      <div className={styles.pagination}>
-        <Pagination
-          currentPage={currentPage}
-          total={Number(total)}
-          perPage={6}
-          search={search}
-        />
-      </div>
     </div>
   );
 };
@@ -38,8 +22,6 @@ BlogLists.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
   blogs: PropTypes.array,
-  currentPage: PropTypes.number,
-  total: PropTypes.number,
 };
 
 export default BlogLists;

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

@@ -3,7 +3,8 @@
   margin: 0 auto;
   margin-bottom: 2rem;
   scroll-behavior: smooth;
-  padding-inline: 1rem;
+  padding-inline: 0.8rem;
+  width: min(100% - 1rem);
 }
 .blog-container .title {
   line-height: 25px;
@@ -19,7 +20,7 @@
 }
 .blog-container .row {
   display: grid;
-  justify-items: flex-start;
+  /* justify-items: flex-start; */
   grid-row-gap: 2rem;
   grid-column-gap: 1.5rem;
 }
@@ -29,22 +30,28 @@
   justify-content: center;
   flex: 1 0 auto;
 }
-.pagination {
-  margin-top: 3rem;
-}
 @media screen and (min-width: 768px) {
   .row {
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
     justify-items: center;
-    grid-row-gap: 3rem;
+    grid-row-gap: 1.5rem;
+    grid-column-gap: 0.5rem;
+  }
+
+  .blog-container :is(.title, .description) {
+    padding-inline: 0.5rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .row {
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+    justify-items: center;
+    grid-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1440px) {
   .bloglist-container {
     padding: 0 100px;
   }
-  .bloglist-container .row {
-    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
-    justify-items: center;
-  }
 }

styles/globals.css

@@ -9,7 +9,7 @@
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   text-decoration: none;
   --heading1: clamp(0.8rem, 1.5rem + 2.3vw, 2.8rem);
-  --heading2: clamp(1rem, 1.4rem + 2.2vw, 2.4rem);
+  --heading2: clamp(1rem, 1.2rem + 2vw, 2.4rem);
   --heading3: clamp(1rem, 1rem + 1.4vw, 1.7rem);
   --heading4: clamp(1rem, 1rem + 1.2vw, 1.5rem);
   --heading5: clamp(1rem, 1rem + 1vw, 1.3rem);