update

package-lock.json

@@ -8,6 +8,9 @@
       "name": "danovin-tasks",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/free-brands-svg-icons": "^5.15.4",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
+        "@fortawesome/react-fontawesome": "^0.1.16",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
@@ -1908,6 +1911,64 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
+      "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",
@@ -17310,6 +17371,44 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "peer": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
+      "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -22,13 +22,13 @@ function App() {
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
-      {/* <BlogDesign1 /> */}
+      <BlogDesign1 />
-      {/* <BlogDesign2 /> */}
+      <BlogDesign2 />
-      {/* <BlogDesign3 /> */}
+      <BlogDesign3 />
-      {/* <BlogDesign4 /> */}
+      <BlogDesign4 />
-      {/* <BlogDesign5 /> */}
+      <BlogDesign5 />
-      {/* <BlogDesign6 /> */}
+      <BlogDesign6 />
-      <HeaderDesign1 />
+      {/* <HeaderDesign1 /> */}
     </div>
   );
 }

src/components/Blogs/design1/BlogDesign1.js

@@ -5,6 +5,10 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {} from "@fortawesome/free-brands-svg-icons";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
 const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
     <section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -51,7 +55,15 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
                 <p className="text-xs text-lightGrayTextColor ml-2 font-light">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" className="w-5 h-5" />
+                <div className="relative">
+                  <FontAwesomeIcon
+                    icon={faComment}
+                    className="text-grayTextColor text-md"
+                  ></FontAwesomeIcon>
+                  <span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
+                    26
+                  </span>
+                </div>
               </div>
             )}
           </div>

src/components/Blogs/design2/BlogDesign2.js

@@ -7,6 +7,10 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {} from "@fortawesome/free-brands-svg-icons";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
 const BlogDesign2 = ({
   blogSubTitle,
   dateButton,
@@ -74,7 +78,15 @@ const BlogDesign2 = ({
               <p className="text-xs text-white font-light ml-2">
                 زمان مطالعه 30 دقیقه
               </p>
-              <img src={whiteCommentIcon} alt="" className="w-6 h-6" />
+              <div className="relative">
+                <FontAwesomeIcon
+                  icon={faComment}
+                  className="text-white text-md"
+                ></FontAwesomeIcon>
+                <span className="comment-num absolute -top-3 -right-3 bg-white text-black">
+                  26
+                </span>
+              </div>
             </div>
           )}
         </div>

src/components/Blogs/design3/BlogDesign3.js

@@ -5,6 +5,10 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {} from "@fortawesome/free-brands-svg-icons";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
 const BlogDesign3 = ({
   blogSubTitle,
   blogAuthor,
@@ -68,7 +72,15 @@ const BlogDesign3 = ({
                 >
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" className="w-6 h-6" />
+                <div className="relative">
+                  <FontAwesomeIcon
+                    icon={faComment}
+                    className="text-grayTextColor text-md"
+                  ></FontAwesomeIcon>
+                  <span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
+                    26
+                  </span>
+                </div>{" "}
               </div>
             )}
           </div>
@@ -86,8 +98,8 @@ export default BlogDesign3;
 // text-lightGrayTextColor
 
 BlogDesign3.defaultProps = {
-  blogTitleColor: "text-darkBlueTextColor2",
+  blogTitleColor: "text-lightGrayTextColor",
-  blogCommentAuthorTextColor: "text-darkBlueTextColor2",
+  blogCommentAuthorTextColor: "text-lightGrayTextColor",
 
   blogSubTitle: true,
   blogAuthor: true,

src/components/Blogs/design4/BlogDesign4.js

@@ -5,6 +5,10 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {} from "@fortawesome/free-brands-svg-icons";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
 const BlogDesign4 = () => {
   return (
     <section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
@@ -47,7 +51,15 @@ const BlogDesign4 = () => {
               <p className="text-xs text-lightGrayTextColor font-light ml-2">
                 زمان مطالعه 30 دقیقه
               </p>
-              <img src={commentIcon} alt="" className="w-6 h-6" />
+              <div className="relative">
+                <FontAwesomeIcon
+                  icon={faComment}
+                  className="text-grayTextColor text-md"
+                ></FontAwesomeIcon>
+                <span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
+                  26
+                </span>
+              </div>{" "}
             </div>
           </div>
         </div>

src/components/Blogs/design5/BlogDesign5.js

@@ -5,6 +5,10 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {} from "@fortawesome/free-brands-svg-icons";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
 const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
     <section className="w-4/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
@@ -53,7 +57,15 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
                 <p className="text-xs text-lightGrayTextColor font-light ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" className="w-6 h-6" />
+                <div className="relative">
+                  <FontAwesomeIcon
+                    icon={faComment}
+                    className="text-grayTextColor text-md"
+                  ></FontAwesomeIcon>
+                  <span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
+                    26
+                  </span>
+                </div>{" "}
               </div>
             )}
           </div>

src/components/Blogs/design6/BlogDesign6.js

@@ -6,6 +6,10 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 import FeaturedImage from "../../../assets/images/article-featured-image.svg";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {} from "@fortawesome/free-brands-svg-icons";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
 const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
     <section className="w-5/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -51,7 +55,15 @@ const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
                 <p className="text-xs text-lightGrayTextColor ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" className="w-7 h-7" />
+                <div className="relative">
+                  <FontAwesomeIcon
+                    icon={faComment}
+                    className="text-grayTextColor text-md"
+                  ></FontAwesomeIcon>
+                  <span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
+                    26
+                  </span>
+                </div>{" "}
               </div>
             )}
           </div>

src/index.scss

@@ -14,3 +14,12 @@ body {
   direction: rtl;
   background-color: #f5f5f5;
 }
+
+.comment-num {
+  font-size: 10px;
+  padding-top: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: 50%;
+}

tailwind.config.js

@@ -38,6 +38,7 @@ module.exports = {
       counterBg: "#66B1EB",
       incrementDecrementBg: "#2E7AB5",
       darkGreenBg: "#038A99",
+      lightGrayBgColor: "#818181",
       midGrayBgColor: "#DBDBDB",
       lightOrangeBgColor: "#F7B60511",
       lightYellowBgColor: "#CEFE2D11", //opacity should be 10 % instead of 100%