updated blog with icons for stats

src/components/blog/BlogCard/index.js

@@ -10,13 +10,23 @@ export default function BlogCard({
   tags,
   image,
   excerpt,
-  name
+  name,
+  views
 }) {
 
   return (
     <Link to={link}>
       <div className={styles.card}>
 
+        <span className={styles.cardData}>
+          <img className={styles.cardEye} src={useBaseUrl('/blog/eye-regular.svg')}></img>
+          <span className={styles.cardDataTextAlign}><div>100</div></span>
+          <span className={styles.cardDataText}>100</span>
+          <img className={styles.cardComment} src={useBaseUrl('/blog/comment-light.svg')}></img>
+          <span className={styles.cardDataTextAlign}><div>8</div></span>
+          <span className={styles.cardDataText}>8</span>
+        </span>
+
         <img className={styles.cardFace} src={useBaseUrl(image)}></img>
         <div className={styles.cardText}>
           <div className={styles.cardTitle}>{title}</div>

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

@@ -30,7 +30,7 @@
   margin: 22px;
   min-width: 170px;
   bottom: 0px;
-  left: 80px;
+  left: 150px;
 }
 .cardTitle {
   font-size: 22px;
@@ -67,8 +67,58 @@
   position: absolute;
   border-radius: 9999px;
   bottom: 10px;
-  left: 10px;
+  left: 120px;
   margin: auto;
   height: 40px;
   width: 40px;
 }
+
+.cardEye {
+  fill: #96a9bb;
+  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
+  filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
+  margin-left: 5px;
+  height: 18px;
+  width: 18px;
+}
+
+.cardDataText {
+  color: #96a9ba;
+  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
+  margin-left: 5px;
+  font-size: 16px;
+  text-align: start;
+  visibility: hidden;
+}
+.cardDataTextAlign {
+  color: #96a9ba;
+  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
+  margin-left: 5px;
+  font-size: 16px;
+  text-align: start;
+  position: absolute;
+  top: -3px
+}
+
+.cardComment {
+  margin-left: 10px;
+  fill: #96a9bb;
+  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
+  filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
+  height: 18px;
+  width: 18px;
+}
+
+.cardCommentText {
+  color: #96a9ba;
+  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
+  margin-left: 5px;
+  height: 20px;
+  font-size: 16px;
+}
+
+.cardData {
+  position: absolute;
+  bottom: 50px;
+  left: 20px;
+}

src/components/blog/BlogCards/index.js

@@ -32,6 +32,7 @@ export default function BlogCards() {
             tags={a.tags}
             link={a.link}
             title={a.title}
+            views={a.views}
             image={a.image}></BlogCard>
           })}
         </div>