single blog page title issue rsolved

README.md

-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+======styling for markdown file======
+
+#-h1 ##-h2 ###-h3 ####-h4 #####-h5 ###### h6
+[data](link)-data is wrapping in square bracket with link
+**bold** or **bold**
+\n\n is new line
+--- three dash for horizontal line
+_italic_ or _italic_
+**_bold and italic _**
+ordered list 1.space items
+unordered list \_space items
+
+> space blockquote
+>
+> > blockquote inside another blockquote
+> > ![alt name](img path)
+> > [![alt](imgpath)](url)--image with url

app/components/base/card/card.module.css

@@ -9,7 +9,11 @@
 .card {
   background-color: var(--card-bg);
   border-radius: 20px;
+  /* transition: transform 0.5s; */
 }
+/* .card:hover {
+  transform: scale(1.1);
+} */
 .cardbottom img {
   border-radius: 50%;
   max-width: 100%;

app/components/base/header/header.module.css

@@ -21,3 +21,22 @@
   text-decoration: none;
   color: var(--title-color);
 }
+.mobilemenu {
+  display: block;
+}
+.themelight {
+  display: flex;
+  gap: 1rem;
+}
+.search {
+  display: none;
+}
+@media screen and (min-width: 991px) {
+  .mobilemenu {
+    display: none;
+  }
+
+  .search {
+    display: block;
+  }
+}

app/components/base/header/page.js

@@ -4,38 +4,42 @@ import Icon from "../icons/page";
 import { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // Correct
 
-function Header({ onThemeChange }) {
+function Header({ onThemeChange, onSearch, onClose }) {
   const [theme, setTheme] = useState("light");
 
   const handleTheme = () => {
     theme == "light" ? setTheme("dark") : setTheme("light");
     onThemeChange(theme);
   };
+  const handleSearch = (value) => {
+    onSearch(value);
+  };
+  const handleClose = () => {
+    onClose("");
+  };
   return (
     <header className={styles.header}>
       <div className={styles.container}>
         <nav className={styles.navbar}>
           <a className={styles["navbar-brand"]} href="/">
-            <FontAwesomeIcon
-              icon="fa-solid fa-newspaper"
+            {/* <FontAwesomeIcon
+              icon="fa fa-newspaper"
               style={{ fontSize: "30px", color: "#5a67d8" }}
-            />
-
+            /> */}
+            <Icon name="newspaper" />
             <h2>NewsBlog</h2>
           </a>
 
-          {/* <div className={styles["search-input"]}>
-            <span className={`${styles["search-icon"]} fa fa-search`}></span>
-            <input
-              className={styles.search}
-              type="text"
-              placeholder="Discover news, articles and more"
-            />
-          </div> */}
-          <Search />
-          <span onClick={handleTheme} className={styles.themelight}>
+          <div className={styles.search}>
+            <Search onSearch={handleSearch} onClose={handleClose} />
+          </div>
+
+          <div onClick={handleTheme} className={styles.themelight}>
             <Icon name={theme == "dark" ? "moon" : "sun"} />
+            <span className={styles.mobilemenu}>
+              <Icon name="hamburger" />
             </span>
+          </div>
         </nav>
       </div>
     </header>

app/components/base/icons/icons.module.css

 .search svg,
 .clock svg,
 .close svg {
-  height: 20px;
-  width: 20px;
+  height: 18px;
+  width: 18px;
   vertical-align: sub;
 }
 
@@ -10,5 +10,17 @@
 .sun svg {
   height: 35px;
   width: 35px;
+  color: var(--font-color-900);
   vertical-align: sub;
 }
+
+.hamburger svg {
+  background: #5a67d8;
+  color: white;
+  padding: 0.5rem 0.7rem;
+  border-radius: 5px;
+}
+
+.newspaper svg {
+  color: #5a67d8;
+}

app/components/base/icons/page.js

@@ -68,12 +68,43 @@ const Icons = ({ name }) => {
         <line x1="6" y1="6" x2="18" y2="18" />
       </svg>
     ),
+
+    newspaper: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="2em"
+        fill="currentColor"
+        viewBox="0 0 576 512"
+        stroke="currentColor"
+      >
+        <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>
+    ),
   };
 
   return <div className={`${styles[name]}`}>{icons[name]}</div>;
 };
 
 Icons.propTypes = {
-  name: PropTypes.oneOf(["sun", "moon", "close", "search", "clock"]),
+  name: PropTypes.oneOf([
+    "sun",
+    "moon",
+    "close",
+    "search",
+    "clock",
+    "hamburger",
+    "newspaper",
+  ]),
 };
 export default Icons;

app/components/top-level/pagination/page.js

 import React, { useState, useEffect } from "react";
 import styles from "./pagination.module.css";
 
-function Pagination({ totalPages, onCurrentPage }) {
+function Pagination({ totalPages, currentPage, onPageChange }) {
   //Set number of pages
-
   const numberOfPages = [];
   for (let i = 1; i <= totalPages; i++) {
     numberOfPages.push(i);
@@ -15,6 +14,7 @@ function Pagination({ totalPages, onCurrentPage }) {
   // Array of buttons what we see on the page
   const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);
   useEffect(() => {
+    console.log("diyd", currentPage);
     let tempNumberOfPages = [...arrOfCurrButtons];
 
     let dotsInitial = "...";
@@ -48,9 +48,16 @@ function Pagination({ totalPages, onCurrentPage }) {
 
     setArrOfCurrButtons(tempNumberOfPages);
   }, [totalPages, currentButton]);
+
+  //update currentButton value if currentPageNo changes
+  useEffect(() => {
+    setCurrentButton(currentPage);
+  }, [currentPage]);
+
+  //onClick function
   const handleCurrentPage = (item) => {
     setCurrentButton(item);
-    onCurrentPage(item);
+    onPageChange(item);
   };
 
   return (

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

@@ -2,6 +2,7 @@
   padding: 1rem;
   border-radius: 15px;
   margin-top: 2rem;
+  font-size: 18px;
   background: var(--card-bg);
 }
 .blogimage {
@@ -18,13 +19,16 @@
   display: block;
 }
 
+blockquote p {
+  font-size: 20px;
+}
 .blog-list ul {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   line-height: 1em;
   gap: 1em;
-  padding-inline: 1rem;
+  padding-inline: 0.1rem;
   font-weight: 500;
   color: var(--font-color-300);
 }
@@ -35,11 +39,15 @@
 .blog-list ul li a:hover {
   color: var(--font-color-700);
 }
-.blog-container {
+/* .blog-container {
   z-index: -1;
   max-width: 1440px;
   padding-inline: 0.5rem;
   margin: 0 auto;
+} */
+.blog-container {
+  width: min(90%, 100% - 2rem);
+  margin: 0 auto;
 }
 .tag {
   display: flex;
@@ -67,11 +75,17 @@ blockquote p::before {
   content: "\2014\00A0";
 }
 .head-container {
-  max-width: 1200px;
-  margin: 0 auto;
+  /* width: clamp(min(768px, 15rem), 1200px, 90%);
+  margin: 0 auto; */
+  /* width: clamp(min(768px, 15rem), 75rem, 90%);
+  margin: 0 auto; */
+  width: min(100% - 2rem, 90%);
+  margin-inline: auto;
 }
 .headtitle {
-  padding-inline: 1rem;
+  width: 100%;
+
+  /* padding-inline: 1rem; */
 }
 .title {
   font-size: clamp(1rem, 1.3rem + 2.5vw, 3.4rem);
@@ -90,16 +104,18 @@ h2 {
   font-size: clamp(1rem, 1rem + 2vw, 2rem);
 }
 @media (min-width: 802px) {
-  .headtitle {
-    padding-inline: 3rem;
-  }
   .blog-content {
     padding: 3rem;
   }
-  .blog-list ul {
-    padding-inline: 3rem;
-  }
+
   .tag {
     gap: 1rem;
   }
 }
+@media screen and (min-width: 1440px) {
+  .headtitle,
+  .blog-list ul {
+    width: 70rem;
+    padding-inline: 6rem;
+  }
+}

app/globals.css

@@ -44,7 +44,9 @@ html {
 h1,
 h2,
 h3,
-h4 {
+h4,
+h5,
+h6 {
   font-family: "Libre Baskerville", serif;
 }
 

stories/header.stories.js

@@ -4,6 +4,8 @@ export default {
   component: Header,
   argTypes: {
     onThemeChange: { actions: "onThemeChange" },
+    onSearch: { actions: "onSearch" },
+    onClose: { actions: "onClose" },
   },
 };
 

stories/icons.stories.js

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

stories/pagination.stories.js

@@ -3,12 +3,13 @@ export default {
   title: "Top-Level/Pagination",
   component: Pagination,
   argTypes: {
-    onCurrentPage: { actions: "onCurrentPage" },
+    onPageChange: { actions: "onPageChange" },
   },
 };
 
 export const pagination = {
   args: {
     totalPages: 10,
+    currentPage: 1,
   },
 };

stories/single-blog.stories.js

@@ -5,20 +5,7 @@ export default {
   argTypes: {},
 };
 export const singleBlog = (args) => <SingleBlog {...args} />;
-//styling for markdown file//
-//#-h1 ##-h2 ###-h3 ####-h4 #####-h5 ###### h6
-//[data](link)-data is wrapping in square bracket with link
-//**bold** or __bold__
-// \n\n  is new line
-// --- three dash for horizontal line
-// *italic* or _italic_
-//***bold and italic ***
-//ordered list 1.space items
-//unordered list _space items
-// >space blockquote
-// >> blockquote inside another blockquote
-//![alt name](img path)
-//[![alt](imgpath)](url)--image with url
+
 singleBlog.args = {
   subTitle: "Create an Art that shows the beauty in everyone ideas of flaws.",
   postedOn: "July 11,2020",