bloglist array value change

components/base/card/card.stories.js

@@ -16,11 +16,13 @@ export const card = {
       height: 300,
     },
     publishedDate: "July 13, 2020.",
-    author: "Isabella Ava",
-    images: {
-      url: require("@img/a1.jpg").default.src,
-      width: 80,
-      height: 80, // Use require to load images
+    author: {
+      name: "Isabella Ava",
+      image: {
+        url: require("@img/a1.jpg").default.src,
+        width: 80,
+        height: 80, // Use require to load images
+      },
     },
     readingTime: "1 min",
   },

components/base/card/index.js

@@ -10,7 +10,6 @@ const Card = ({
   image,
   publishedDate,
   author,
-  images,
   readingTime,
 }) => {
   return (
@@ -30,13 +29,13 @@ const Card = ({
         <div className={styles.cardbottom}>
           <Image
             className={styles.img}
-            src={images.url}
-            height={images.height}
-            width={images.width}
+            src={author.image.url}
+            height={author.image.height}
+            width={author.image.width}
             alt={author}
           />
           <div className={styles.authordescription}>
-            <p className={styles.authorName}>{author}</p>
+            <p className={styles.authorName}>{author.name}</p>
             <div className={styles["author-desc"]}>
               {publishedDate}
               <span className={styles.icon}>
@@ -57,10 +56,14 @@ Card.propTypes = {
     url: PropTypes.string,
   }),
   publishedDate: PropTypes.string,
-  author: PropTypes.string,
-  images: PropTypes.shape({
-    url: PropTypes.string, // Use PropTypes.string for images
-  }),
+  author: {
+    name: PropTypes.string,
+    image: PropTypes.shape({
+      url: PropTypes.string,
+      height: PropTypes.number,
+      width: PropTypes.number, // Use PropTypes.string for images
+    }),
+  },
 
   readingTime: PropTypes.string,
 };

components/base/card/styles.module.css

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

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

@@ -15,11 +15,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle1.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Isabella ava",
-        images: {
-          url: require("@img/a1.jpg"),
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@img/a1.jpg"),
+            height: 80,
+            width: 80,
+          },
         },
 
         readingTime: "1min",
@@ -30,12 +36,18 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle2.jpg"),
+          width: 470,
+          height: 300,
         },
 
         publishedDate: "July 13, 2020.",
-        author: "Charlotte mia",
-        images: {
-          url: require("@img/a2.jpg"),
+        author: {
+          name: "Charlotte mia",
+          image: {
+            url: require("@img/a2.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
 
         readingTime: "1min",
@@ -46,11 +58,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle3.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Elizabeth",
-        images: {
-          url: require("@img/a3.jpg"),
+        author: {
+          name: "Elizabeth",
+          image: {
+            url: require("@img/a3.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
 
         readingTime: "1min",
@@ -61,11 +79,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle4.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Charlotte mia",
-        images: {
-          url: require("@img/a1.jpg"),
+        author: {
+          name: "Charlotte mia",
+          image: {
+            url: require("@img/a1.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
         readingTime: "1min",
       },
@@ -75,11 +99,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle5.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Elizabeth",
-        images: {
-          url: require("@img/a3.jpg"),
+        author: {
+          name: "Elizabeth",
+          image: {
+            url: require("@img/a3.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
 
         readingTime: "1min",
@@ -90,11 +120,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle6.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Isabella ava",
-        images: {
-          url: require("@img/a1.jpg"),
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@img/a1.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
         readingTime: "1min",
       },
@@ -104,11 +140,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle6.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Isabella ava",
-        images: {
-          url: require("@img/a1.jpg"),
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@img/a1.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
         readingTime: "1min",
       },
@@ -118,11 +160,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle6.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Isabella ava",
-        images: {
-          url: require("@img/a1.jpg"),
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@img/a1.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
         readingTime: "1min",
       },
@@ -132,11 +180,17 @@ export const blogLists = {
           "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
         image: {
           url: require("@img/lifestyle6.jpg"),
+          width: 470,
+          height: 300,
         },
         publishedDate: "July 13, 2020.",
-        author: "Isabella ava",
-        images: {
-          url: require("@img/a1.jpg"),
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@img/a1.jpg"),
+            width: 80,
+            height: 80,
+          },
         },
         readingTime: "1min",
       },

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

@@ -9,7 +9,6 @@ function SingleBlog({
   author,
   category,
   readingTime,
-  image,
   categories,
   markdown,
 }) {
@@ -22,13 +21,13 @@ function SingleBlog({
         <div className={styles["blog-list"]}>
           <ul>
             <li>
-              Posted on
+              Posted on&nbsp;
               <span className={styles["list-bold"]}>{publishedDate}</span>
             </li>
             <li>
               By&nbsp;
               <a href="#" className={styles["list-bold"]}>
-                {author}
+                {author.name}
               </a>
             </li>
             <li>
@@ -49,10 +48,10 @@ function SingleBlog({
         <div className={styles.blogimage}>
           <Image
             className={styles.img}
-            src={image.url}
-            alt={title}
-            width={image.width}
-            height={image.height}
+            src={author.image.url}
+            alt={author.name}
+            width={author.image.width}
+            height={author.image.height}
           />
         </div>
         <div className={styles["blog-content"]}>
@@ -72,14 +71,16 @@ function SingleBlog({
 SingleBlog.propTypes = {
   title: PropTypes.string,
   publishedDate: PropTypes.string,
-  authorName: PropTypes.string,
+  author: {
+    name: PropTypes.string,
+    image: PropTypes.shape({
+      url: PropTypes.string,
+      width: PropTypes.number,
+      height: PropTypes.number,
+    }),
+  },
   category: PropTypes.string,
   readingTime: PropTypes.string,
   categories: PropTypes.array,
-  image: PropTypes.shape({
-    url: PropTypes.string,
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }),
 };
 export default SingleBlog;

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

@@ -7,11 +7,13 @@ export const singleBlog = {
   args: {
     title: "Create an Art that shows the beauty in everyone ideas of flaws.",
     publishedDate: "July 11,2020",
-    author: "Charlotte mia",
-    image: {
-      url: require("@/public/images/blogsingle.jpg").default.src,
-      width: 1100,
-      height: 400,
+    author: {
+      name: "Charlotte mia",
+      image: {
+        url: require("@/public/images/blogsingle.jpg").default.src,
+        width: 1100,
+        height: 400,
+      },
     },
 
     category: "Fashion",

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

@@ -39,9 +39,9 @@ blockquote p {
   text-decoration: none;
   color: var(--font-color-300);
 }
-.blog-list ul li a:hover {
+/* .blog-list ul li a:hover {
   color: var(--font-color-700);
-}
+} */
 
 .blog-container {
   width: min(90%, 100% - 2rem);