added image to card

src/components/blog/BlogCard/index.js

@@ -8,16 +8,18 @@ export default function BlogCard({
   link,
   title,
   tags,
+  creatorImage,
   image,
   excerpt,
   name,
   views,
-  replies
+  replies,
+  id
 }) {
 
   return (
     <Link to={link}>
-      <div className={styles.card}>
+      <div className={styles.card} >
 
         <span className={styles.cardData}>
           <img className={styles.cardEye} src={useBaseUrl('/blog/eye-regular.svg')}></img>
@@ -28,22 +30,29 @@ export default function BlogCard({
           <span className={styles.cardDataText}>{replies}</span>
         </span>
 
-        <img className={styles.cardFace} src={useBaseUrl(image)}></img>
+        <div className={styles.cardUser}>
+          <img className={styles.cardFace} src={useBaseUrl(creatorImage)}></img>
+          <div className={styles.cardName}>{name}</div>
+        </div>
+
+
         <div className={styles.cardText}>
+          <img className={styles.cardImage} src={useBaseUrl(image)}></img>
           <div className={styles.cardTitle}>{title}</div>
+          <div className={styles.tags}>
+            {tags?.map((tag, index) => {
+              if (index > 2) {
+                return '';
+              }
+              return <div key={tag} className={styles.tag}>{tag}</div>;
+            })}
+          </div>
           <div className={styles.cardBody}>{excerpt}</div>
         </div>
-        <div className={styles.cardName}>{name}</div>
+        
+
 
 
-        <div className={styles.tags}>
-          {tags?.map((tag, index) => {
-            if (index > 2) {
-              return '';
-            }
-            return <div className={styles.tag}>{tag}</div>;
-          })}
-        </div>
       </div>
     </Link>
   );

src/components/blog/BlogCard/styles.module.css

@@ -2,7 +2,7 @@
 .card {
   position: relative;
   margin-top: 20px;
-  height: 400px;
+  height: 650px;
   /* UI Properties */
   background: var(--dev-card-background);
   box-shadow: var(--dev-card-shadow);
@@ -25,13 +25,7 @@
   left: 0;
 }
 
-.cardName {
-  position: absolute;
-  margin: 22px;
-  min-width: 170px;
-  bottom: 0px;
-  left: 150px;
-}
+
 .cardTitle {
   font-size: 22px;
   font-weight: 700;
@@ -46,33 +40,49 @@
 
 
 .tag {
-  font-size: 12px;
+  font-size: 16px;
   font-weight: 500;
   color: var(--dev-secondary-text);
+  background-color: #eaeef1;
+  padding: 0px 8px;
 }
 
 .tags {
-  position: absolute;
   margin: 0px;
   width: 230px;
-  top: 10px;
-  left: 20px;
 
   display: grid;
   grid-template-columns: max-content max-content max-content;
   grid-gap: 10px;
 }
 
-.cardFace {
+.cardUser {
   position: absolute;
-  border-radius: 9999px;
   bottom: 10px;
   left: 120px;
+  display: flex;
+}
+
+.cardFace {
+  border-radius: 9999px;
   margin: auto;
   height: 40px;
   width: 40px;
 }
 
+.cardName {
+  min-width: 170px;
+  margin-top: 7px;
+  margin-left: 10px;
+}
+
+
+.cardData {
+  position: absolute;
+  bottom: 50px;
+  left: 20px;
+}
+
 .cardEye {
   fill: #96a9bb;
   /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
@@ -117,8 +127,3 @@
   font-size: 16px;
 }
 
-.cardData {
-  position: absolute;
-  bottom: 50px;
-  left: 20px;
-}

src/components/blog/BlogCards/index.js

@@ -26,17 +26,19 @@ export default function BlogCards() {
     return (
       <div className={styles.center}>
         <div className={styles.gridContainer}>
-
           {ans.map(function(a, index){
-            return <BlogCard
+            return <BlogCard 
+            key={a.link}
+            id={index + a.link}
             excerpt={a.excerpt}
             name={a.name}
             tags={a.tags}
             link={a.link}
+            image={a.image}
             title={a.title}
             views={a.views}
             replies={a.replies}
-            image={a.image}></BlogCard>
+            creatorImage={a.creatorImage}></BlogCard>
           })}
         </div>
       </div>
@@ -52,8 +54,9 @@ async function getPostList(topic) {
   return {
     name: fullTopic.details.created_by.name,
     excerpt: styleExcerpt(topic.excerpt),
-    image: getavatarURL(fullTopic.details.created_by.avatar_template),
+    creatorImage: getavatarURL(fullTopic.details.created_by.avatar_template),
     tags: topic.tags,
+    image: fullTopic.image_url,
     link:
       'https://developer.sailpoint.com/discuss/t/' +
       topic.slug +