blog list height issue resolved

.storybook/preview.js

@@ -2,10 +2,6 @@
 import "../app/globals.css";
 import { useDarkMode } from "storybook-dark-mode";
 import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faNewspaper } from "@fortawesome/free-solid-svg-icons";
-
-library.add(faNewspaper);
 
 const preview = {
   parameters: {

app/_app.js

 import "@styles/global.css";
-import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faNewspaper } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faNewspaper);
-//import Layout from '../components/layout'
+// import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
+// import { library } from "@fortawesome/fontawesome-svg-core";
+// import { faNewspaper } from "@fortawesome/free-solid-svg-icons";
+
+// library.add(faNewspaper);
+
 export default function App({ Component, pageProps }) {
-  return (
-    <>
-      <Component {...pageProps} />
-    </>
-  );
+  return <Component {...pageProps} />;
 }

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

@@ -9,34 +9,43 @@
 .card {
   background-color: var(--card-bg);
   border-radius: 20px;
-  /* transition: transform 0.5s; */
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease-in-out;
+  word-wrap: break-word;
 }
-/* .card:hover {
-  transform: scale(1.1);
-} */
-.cardbottom img {
-  border-radius: 50%;
-  max-width: 100%;
+.card:hover {
+  transform: translateY(-10px);
 }
+
 .card-content {
   padding: 1.5rem;
   padding-bottom: 1rem;
-
-  word-wrap: break-word;
+}
+.authordescription > p {
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .cardbottom {
   display: grid;
   grid-template-columns: 0.5fr 2fr;
   line-height: 0;
-  align-items: start;
+  align-items: center;
   grid-gap: 16px;
   color: var(--font-color-900);
 }
 
+.cardbottom img {
+  border-radius: 50%;
+  height: auto;
+  max-width: 100%;
+}
+
 .description {
   color: var(--font-color-300);
   line-height: 1.5em;
+  font-weight: 600px;
   word-wrap: break-word;
 }
 

app/components/base/card/page.js

@@ -5,38 +5,48 @@ import Icons from "../icons/page";
 import PropTypes from "prop-types";
 
 const Card = ({
-  mainTitle,
+  title,
   description,
-  imageUrl,
-  postedOn,
+  blogImage,
+  publishedOn,
   author,
   readingTime,
 }) => {
+  console.log(blogImage);
   return (
     <div className={styles.card}>
       <Link prefetch={false} href="#">
-        <Image className={styles.img} src={imageUrl} alt="cardimage" />
+        <Image
+          className={styles.img}
+          src={blogImage.image}
+          height={blogImage.height}
+          width={blogImage.width}
+          quality={100}
+          alt="cardimage"
+        />
       </Link>
       <div className={styles["card-content"]}>
         <Link prefetch={false} href="#" className={styles.title}>
-          {mainTitle}
+          <p>{title}</p>
         </Link>
         <p className={styles.description}>{description}</p>
-        <div className={styles.cardbottom}>
-          <Image
-            className={styles.img}
-            src={author.authImg}
-            quality={100}
-            alt="authorImg"
-          />
-          <div>
-            <h3>{author.name}</h3>
-            <div className={styles["author-desc"]}>
-              {postedOn}
-              <span className={styles.icon}>
-                <Icons name="clock" />
-                {readingTime}
-              </span>
+        <div className={styles.authorcontainer}>
+          <div className={styles.cardbottom}>
+            <Image
+              className={styles.img}
+              src={author.image}
+              quality={100}
+              alt="authorImg"
+            />
+            <div className={styles.authordescription}>
+              <p>{author.name}</p>
+              <div className={styles["author-desc"]}>
+                {publishedOn}
+                <span className={styles.icon}>
+                  <Icons name="clock" />
+                  {readingTime}
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -45,15 +55,19 @@ const Card = ({
   );
 };
 Card.propTypes = {
-  mainTitle: PropTypes.string,
+  title: PropTypes.string,
   description: PropTypes.string,
-  imageUrl: PropTypes.object,
-  postedOn: PropTypes.string,
+  blogImage: PropTypes.shape({
+    image: PropTypes.string,
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }),
+  publishedon: PropTypes.string,
   author: PropTypes.shape({
     name: PropTypes.string,
-    authImg: PropTypes.string, // Use PropTypes.string for authImg
+    image: PropTypes.string, // Use PropTypes.string for images
   }),
-  postedOn: PropTypes.string,
+
   readingTime: PropTypes.string,
 };
 

app/components/base/header/page.js

 import styles from "./header.module.css";
 import Search from "../search/page";
 import Icon from "../icons/page";
-import { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // Correct
+import { useTheme } from "../../../context";
+import Link from "next/link";
 
-function Header({ onThemeChange, onSearch, onClose }) {
-  const [theme, setTheme] = useState("light");
+function Header({ name, onThemeChange, onSearch, onClose }) {
+  const { theme, toggleTheme } = useTheme();
 
   const handleTheme = () => {
-    theme == "light" ? setTheme("dark") : setTheme("light");
+    toggleTheme();
     onThemeChange(theme);
   };
   const handleSearch = (value) => {
@@ -21,21 +21,17 @@ function Header({ onThemeChange, onSearch, onClose }) {
     <header className={styles.header}>
       <div className={styles.container}>
         <nav className={styles.navbar}>
-          <a className={styles["navbar-brand"]} href="/">
-            {/* <FontAwesomeIcon
-              icon="fa fa-newspaper"
-              style={{ fontSize: "30px", color: "#5a67d8" }}
-            /> */}
+          <Link className={styles["navbar-brand"]} href="/" prefetch={false}>
             <Icon name="newspaper" />
-            <h2>NewsBlog</h2>
-          </a>
+            <h2>{name}</h2>
+          </Link>
 
           <div className={styles.search}>
             <Search onSearch={handleSearch} onClose={handleClose} />
           </div>
 
           <div onClick={handleTheme} className={styles.themelight}>
-            <Icon name={theme == "dark" ? "moon" : "sun"} />
+            <Icon name={theme == "light" ? "moon" : "sun"} />
             <span className={styles.mobilemenu}>
               <Icon name="hamburger" />
             </span>

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

@@ -10,7 +10,7 @@
 .sun svg {
   height: 35px;
   width: 35px;
-  color: var(--font-color-900);
+  color: var(--font-color-300);
   vertical-align: sub;
 }
 
@@ -19,6 +19,8 @@
   color: white;
   padding: 0.5rem 0.7rem;
   border-radius: 5px;
+  height: 35px;
+  width: 35px;
 }
 
 .newspaper svg {

app/components/base/search/search.module.css

@@ -2,16 +2,16 @@
   height: 48px;
   width: 30vw;
   background: #f4f4f4;
-  border-radius: 10px;
   border: none;
-  outline: 3px solid var(--card-bg);
-
+  outline: none;
   padding-left: 3rem;
   font-size: 16px;
 }
 .search-input {
   position: relative;
   display: inline-block;
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
 }
 .search-icon {
   position: absolute;

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

-.bloglist-container {
+.blog-container {
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -7,6 +7,12 @@
 
   grid-row-gap: 3rem;
 }
+.card-container {
+  display: flex;
+  align-self: normal;
+  flex: 1 0 auto;
+}
+
 .title {
   font-size: 38px;
   line-height: 25px;

app/components/top-level/blog-lists/page.js

 import PropTypes from "prop-types";
 import Card from "../../base/card/page";
 import styles from "./blog-lists.module.css";
-const BlogLists = ({ listsData }) => {
+const BlogLists = ({ title, description, blogs }) => {
   return (
-    <div className={styles["bloglist-container"]}>
-      <h1 className={styles.title}>Lifestyle</h1>
-      <p className={styles.description}>
-        Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos
-        dolorum
-      </p>
+    <div className={styles["blog-container"]}>
+      <h1 className={styles.title}>{title}</h1>
+      <p className={styles.description}>{description}</p>
       <div className={styles.row}>
-        {listsData.map((blogData, i) => (
-          <Card key={i} {...blogData} />
+        {blogs.map((blogData, i) => (
+          <div key={i} className={styles["card-container"]}>
+            <Card {...blogData} />
+          </div>
         ))}
       </div>
     </div>
   );
 };
 BlogLists.propTypes = {
-  listsData: PropTypes.array,
+  blogs: PropTypes.array,
 };
 
 export default BlogLists;

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

 import React, { useState, useEffect } from "react";
 import styles from "./pagination.module.css";
+import PropTypes from "prop-types";
 
-function Pagination({ totalPages, currentPage, onPageChange }) {
+function Pagination({ total, currentPage, onPageChange }) {
   //Set number of pages
   const numberOfPages = [];
-  for (let i = 1; i <= totalPages; i++) {
+  const totalPage = total <= 1 ? 1 : total;
+  for (let i = 1; i <= totalPage; i++) {
     numberOfPages.push(i);
   }
 
@@ -14,7 +16,6 @@ function Pagination({ totalPages, currentPage, onPageChange }) {
   // Array of buttons what we see on the page
   const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);
   useEffect(() => {
-    console.log("diyd", currentPage);
     let tempNumberOfPages = [...arrOfCurrButtons];
 
     let dotsInitial = "...";
@@ -47,7 +48,7 @@ function Pagination({ totalPages, currentPage, onPageChange }) {
     }
 
     setArrOfCurrButtons(tempNumberOfPages);
-  }, [totalPages, currentButton]);
+  }, [total, currentButton]);
 
   //update currentButton value if currentPageNo changes
   useEffect(() => {
@@ -100,4 +101,8 @@ function Pagination({ totalPages, currentPage, onPageChange }) {
   );
 }
 
+Pagination.propTypes = {
+  total: PropTypes.number.isRequired,
+  currentPage: PropTypes.number,
+};
 export default Pagination;

app/components/top-level/pagination/pagination.module.css

@@ -24,8 +24,9 @@
 }
 
 .pagination-container a.active {
-  background-color: var(--primary-color);
-  color: white;
+  background: #5a67d8;
+  color: #fff;
+
   border: 1px solid #7cbddb;
   border-radius: 10px;
   font-size: 14px;
@@ -37,8 +38,8 @@
   cursor: not-allowed;
 }
 .pagination-container a:hover:not(.active) {
-  background-color: var(--primary-color);
-  color: white;
+  background: #5a67d8;
+  color: #fff;
 }
 
 .next {

app/components/top-level/single-blog/page.js

@@ -3,20 +3,20 @@ import styles from "./single-blog.module.css";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 function SingleBlog({
-  subTitle,
+  title,
   postedOn,
-  authorName,
-  publishedIn,
+  author,
+  category,
   readTime,
   blogImg,
-  tags,
+  categories,
   markdown,
 }) {
   return (
     <>
       <div className={styles["head-container"]}>
         <div className={styles.headtitle}>
-          <h1 className={styles.title}>{subTitle}</h1>
+          <h1 className={styles.title}>{title}</h1>
         </div>
         <div className={styles["blog-list"]}>
           <ul>
@@ -26,13 +26,13 @@ function SingleBlog({
             <li>
               By&nbsp;
               <a href="#" className={styles["list-bold"]}>
-                {authorName}
+                {author?.name}
               </a>
             </li>
             <li>
               Published in&nbsp;
               <a href="#" className={styles["list-bold"]}>
-                {publishedIn}
+                {category}
               </a>
             </li>
             <li>
@@ -47,7 +47,7 @@ function SingleBlog({
         <div className={styles.blogimage}>
           <Image
             className={styles.img}
-            src={blogImg}
+            src={author?.image}
             quality={100}
             alt="image"
           />
@@ -55,8 +55,8 @@ function SingleBlog({
         <div className={styles["blog-content"]}>
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
           <div className={styles.tag}>
-            <h3>Tag:</h3>
-            {tags.map((e, i) => (
+            <h3>Tags:</h3>
+            {categories.map((e, i) => (
               <p key={i}>{e}</p>
             ))}
           </div>

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

@@ -92,7 +92,7 @@ blockquote p::before {
   /* padding-inline: 1rem; */
 }
 .title {
-  font-size: clamp(1rem, 1.3rem + 2.5vw, 3.4rem);
+  font-size: clamp(1rem, 1.3rem + 2vw, 3rem);
   margin: 0;
   font-weight: 600;
   color: var(--font-color-900);
@@ -105,7 +105,7 @@ h3 {
   color: var(--font-color-900);
 }
 h2 {
-  font-size: clamp(1rem, 1rem + 2vw, 2rem);
+  font-size: clamp(1rem, 1rem + 2vw, 1.7rem);
 }
 @media (min-width: 802px) {
   .blog-content {

app/context/index.js

+import React, { createContext, useState, useContext, useEffect } from "react";
+import { useDarkMode } from "storybook-dark-mode";
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const isDarkMode = useDarkMode();
+  const [theme, setTheme] = useState("light");
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  useEffect(() => {
+    // You can use localStorage to persist the theme preference
+    const savedTheme = localStorage.getItem("theme");
+    setTheme((isDarkMode ? "dark" : "light") || savedTheme);
+  }, [isDarkMode]);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+export const decorators = [
+  (renderStory) => <ThemeProvider>{renderStory()}</ThemeProvider>,
+];

app/context/themecontext.js

-import { ThemeProvider } from "next-themes";
-import { useDarkMode } from "storybook-dark-mode";
-
-export function Providers({ children }) {
-  return (
-    <ThemeProvider value={useDarkMode() ? darkTheme : defaultTheme}>
-      {children}
-    </ThemeProvider>
-  );
-}
-export const decorators = [
-  (renderStory) => <Providers>{renderStory()}</Providers>,
-];

app/globals.css

+@import url("//fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600&display=swap");
+@import url("//fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");
+
+* {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
 .light {
   --primary-color: #5a67d8;
   --secondary-color: #463373;
-  --font-color-900: #718096;
+  --font-color-900: #2d3748;
   --font-color-300: #718096;
   --title-color: #2d3748;
-  --bg-color: #f4f4f4;
+  --bg-color: #f8f9fa;
   --card-bg: #fff;
   --heading-color: #2d3748;
   --border-radius: 6px;
@@ -25,6 +34,7 @@
   --font-color-900: #fff;
   --title-color: #fff;
   --font-color-700: #fff;
+  --primary-color: #fff;
 }
 
 body,
@@ -38,12 +48,12 @@ html {
   margin: 0 auto;
   color: #718096;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 h1,
 h2,
-h3,
 h4,
 h5,
 h6 {

app/layout.js

 import { Inter } from "next/font/google";
 import "./globals.css";
+import { useTheme, ThemeProvider } from "./context";
+import { useEffect } from "react";
 
 const inter = Inter({ subsets: ["latin"] });
-import { Providers } from "../app/context/themecontext";
 
 export const metadata = {
   title: "Home",
@@ -10,11 +11,15 @@ export const metadata = {
 };
 
 export default function RootLayout({ children }) {
+  const { theme } = useTheme();
+  useEffect(() => {
+    console.log("Theme in RootLayout:", theme);
+  }, [theme]);
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <Providers>{children}</Providers>
-      </body>
-    </html>
+    <ThemeProvider>
+      <html lang="en" className={theme}>
+        <body>{children}</body>
+      </html>
+    </ThemeProvider>
   );
 }

jsconfig.json

 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+     
     }
   }
 }

stories/blog-lists.stories.js

@@ -7,76 +7,104 @@ export default {
 export const blogLists = (args) => <BlogLists {...args} />;
 
 blogLists.args = {
-  listsData: [
+  title: "Lifestyle",
+  description:
+    "Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum",
+  blogs: [
     {
-      mainTitle: "How to get perfect start for beginning runners",
+      title: "How to get perfect start for beginning runners",
       description:
         "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-      imageUrl: require("../public/images/lifestyle1.jpg"),
-      postedOn: "July 13, 2020.",
+      blogImage: {
+        image: require("../public/images/lifestyle1.jpg"),
+        height: 490,
+        width: 740,
+      },
+      publishedOn: "July 13, 2020.",
       author: {
         name: "Isabella ava",
-        authImg: require("../public/images/a1.jpg"),
+        image: require("../public/images/a1.jpg"),
       },
       readingTime: "1min",
     },
     {
-      mainTitle: "Great tools to improve your personal blogging experience",
+      title: "Great tools to improve your personal blogging experience",
       description:
         "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-      imageUrl: require("../public/images/lifestyle2.jpg"),
-      postedOn: "July 13, 2020.",
+      blogImage: {
+        image: require("../public/images/lifestyle2.jpg"),
+        height: 490,
+        width: 740,
+      },
+
+      publishedOn: "July 13, 2020.",
       author: {
         name: "Charlotte mia",
-        authImg: require("../public/images/a2.jpg"),
+        image: require("../public/images/a2.jpg"),
       },
       readingTime: "1min",
     },
     {
-      mainTitle: "Blog Guide: How to Start a Personal blog on WordPress",
+      title: "Blog Guide: How to Start a Personal blog on WordPress",
       description:
         "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-      imageUrl: require("../public/images/lifestyle3.jpg"),
-      postedOn: "July 13, 2020.",
+      blogImage: {
+        image: require("../public/images/lifestyle3.jpg"),
+        height: 490,
+        width: 740,
+      },
+      publishedOn: "July 13, 2020.",
       author: {
         name: "Elizabeth",
-        authImg: require("../public/images/a3.jpg"),
+        image: require("../public/images/a3.jpg"),
       },
       readingTime: "1min",
     },
     {
-      mainTitle: "The technical setup when starting a personal blog",
+      title: "The technical setup when starting a personal blog",
       description:
         "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-      imageUrl: require("../public/images/lifestyle4.jpg"),
-      postedOn: "July 13, 2020.",
+      blogImage: {
+        image: require("../public/images/lifestyle4.jpg"),
+        height: 490,
+        width: 740,
+      },
+      publishedOn: "July 13, 2020.",
       author: {
         name: "Charlotte mia",
-        authImg: require("../public/images/a1.jpg"),
+        image: require("../public/images/a1.jpg"),
       },
       readingTime: "1min",
     },
     {
-      mainTitle: "3 New outfit Formulas To Add to your Capsule Wardrobe",
+      title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
       description:
         "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-      imageUrl: require("../public/images/lifestyle5.jpg"),
-      postedOn: "July 13, 2020.",
+      blogImage: {
+        image: require("../public/images/lifestyle5.jpg"),
+        height: 490,
+        width: 740,
+      },
+      publishedOn: "July 13, 2020.",
       author: {
         name: "Elizabeth",
-        authImg: require("../public/images/a3.jpg"),
+        image: require("../public/images/a3.jpg"),
       },
       readingTime: "1min",
     },
     {
-      mainTitle: "3 New outfit Formulas To Add to your Capsule Wardrobe",
+      title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
       description:
         "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-      imageUrl: require("../public/images/lifestyle6.jpg"),
-      postedOn: "July 13, 2020.",
+      blogImage: {
+        image: require("../public/images/lifestyle6.jpg"),
+        height: 490,
+        width: 740,
+      },
+      publishedOn: "July 13, 2020.",
       author: {
         name: "Isabella ava",
-        authImg: require("../public/images/a1.jpg"),
+        image: require("../public/images/a1.jpg"),
       },
       readingTime: "1min",
     },

stories/card.stories.js

@@ -8,14 +8,18 @@ export default {
 };
 export const card = (args) => <Card {...args} />;
 card.args = {
-  mainTitle: "How to get a perfect start for beginning runners",
+  title: "How to get a perfect start for beginning runners",
   description:
     "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-  imageUrl: require("../public/images/lifestyle1.jpg"), // Use require to load images
-  postedOn: "July 13, 2020.",
+  blogImage: {
+    image: require("../public/images/lifestyle1.jpg"),
+    height: 490,
+    width: 740,
+  },
+  publishedOn: "July 13, 2020.",
   author: {
     name: "Isabella Ava",
-    authImg: require("../public/images/a1.jpg"), // Use require to load images
+    image: require("../public/images/a1.jpg"), // Use require to load images
   },
   readingTime: "1 min",
 };

stories/header.stories.js

 import Header from "../app/components/base/header/page";
+import { ThemeProvider } from "../app/context";
 export default {
   title: "Base/Header",
   component: Header,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
   argTypes: {
     onThemeChange: { actions: "onThemeChange" },
     onSearch: { actions: "onSearch" },
@@ -9,4 +17,8 @@ export default {
   },
 };
 
-export const header = {};
+export const header = {
+  args: {
+    name: "NewsBlog",
+  },
+};

stories/pagination.stories.js

@@ -9,7 +9,7 @@ export default {
 
 export const pagination = {
   args: {
-    totalPages: 10,
+    total: 10,
     currentPage: 1,
   },
 };

stories/single-blog.stories.js

@@ -7,13 +7,16 @@ export default {
 export const singleBlog = (args) => <SingleBlog {...args} />;
 
 singleBlog.args = {
-  subTitle: "Create an Art that shows the beauty in everyone ideas of flaws.",
+  title: "Create an Art that shows the beauty in everyone ideas of flaws.",
   postedOn: "July 11,2020",
-  authorName: "Charlotte mia",
-  publishedIn: "Fashion",
+  author: {
+    name: "Charlotte mia",
+    image: require("../public/images/blogsingle.jpg"),
+  },
+
+  category: "Fashion",
   readTime: "1 min read",
-  tags: ["Fashion", "Beauty"],
-  blogImg: require("../public/images/blogsingle.jpg"),
+  categories: ["Fashion", "Beauty"],
   markdown: `
 ## How to create an Art that shows the beauty in everyone ideas of flaws.