@@ -56,11 +61,10 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
زمان مطالعه 30 دقیقه
-
-
+
+
26
@@ -75,8 +79,21 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
export default BlogDesign1;
+// background color i used in commnet number background color
+// bg-lightGrayBgColor
+// bg-white
+
+// text color i used for comment number text color:
+// text-grayTextColor
+// text-white
+
BlogDesign1.defaultProps = {
blogExcerpt: true,
blogAuthor: true,
blogComments: true,
+
+ commentNumBgColor: "bg-lightGrayBgColor",
+ commentNumTextColor: "text-white",
+ commentNumTopPosition: "-top-2",
+ commentNumRightPosition: "-right-2",
};
diff --git a/src/components/Blogs/design2/BlogDesign2.js b/src/components/Blogs/design2/BlogDesign2.js
index 08422b2..bfd918e 100644
--- a/src/components/Blogs/design2/BlogDesign2.js
+++ b/src/components/Blogs/design2/BlogDesign2.js
@@ -5,18 +5,19 @@ import "./BlogDesign2.scss";
import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
+import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
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,
tagButton,
blogAuthor,
blogComments,
+ commentNumBgColor,
+ commentNumTextColor,
+ commentNumTopPosition,
+ commentNumRightPosition,
}) => {
return (
@@ -79,11 +80,10 @@ const BlogDesign2 = ({
زمان مطالعه 30 دقیقه
-
-
+
+
26
@@ -105,10 +105,23 @@ const BlogDesign2 = ({
export default BlogDesign2;
+// background color i used in commnet number background color
+// bg-lightGrayBgColor
+// bg-white
+
+// text color i used for comment number text color:
+// text-grayTextColor
+// text-white
+
BlogDesign2.defaultProps = {
blogSubTitle: true,
dateButton: true,
tagButton: false,
blogAuthor: true,
blogComments: true,
+
+ commentNumBgColor: "bg-white",
+ commentNumTextColor: "text-grayTextColor",
+ commentNumTopPosition: "-top-2",
+ commentNumRightPosition: "-right-2",
};
diff --git a/src/components/Blogs/design3/BlogDesign3.js b/src/components/Blogs/design3/BlogDesign3.js
index 5cf21bc..1eed0fc 100644
--- a/src/components/Blogs/design3/BlogDesign3.js
+++ b/src/components/Blogs/design3/BlogDesign3.js
@@ -3,11 +3,8 @@ import React from "react";
import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
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";
+import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
+import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
const BlogDesign3 = ({
blogSubTitle,
@@ -15,6 +12,10 @@ const BlogDesign3 = ({
blogComments,
blogTitleColor,
blogCommentAuthorTextColor,
+ commentNumBgColor,
+ commentNumTextColor,
+ commentNumTopPosition,
+ commentNumRightPosition,
}) => {
return (
@@ -73,14 +74,13 @@ const BlogDesign3 = ({
زمان مطالعه 30 دقیقه
-
-
+
+
26
- {" "}
+
)}
@@ -97,6 +97,14 @@ export default BlogDesign3;
// text-productTitle
// text-lightGrayTextColor
+// background color i used in commnet number background color
+// bg-lightGrayBgColor
+// bg-white
+
+// text color i used for comment number text color:
+// text-grayTextColor
+// text-white
+
BlogDesign3.defaultProps = {
blogTitleColor: "text-lightGrayTextColor",
blogCommentAuthorTextColor: "text-lightGrayTextColor",
@@ -104,4 +112,9 @@ BlogDesign3.defaultProps = {
blogSubTitle: true,
blogAuthor: true,
blogComments: true,
+
+ commentNumBgColor: "bg-lightGrayBgColor",
+ commentNumTextColor: "text-white",
+ commentNumTopPosition: "-top-2",
+ commentNumRightPosition: "-right-2",
};
diff --git a/src/components/Blogs/design4/BlogDesign4.js b/src/components/Blogs/design4/BlogDesign4.js
index 74a7d30..7876c36 100644
--- a/src/components/Blogs/design4/BlogDesign4.js
+++ b/src/components/Blogs/design4/BlogDesign4.js
@@ -3,13 +3,18 @@ import React from "react";
import blogImage from "../../../assets/images/blog-featured-image.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
-import commentIcon from "../../../assets/icons/black-comment-icon.svg";
+import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
+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 BlogDesign4 = () => {
+const BlogDesign4 = ({
+ blogExcerpt,
+ blogAuthor,
+ blogComments,
+ commentNumBgColor,
+ commentNumTextColor,
+ commentNumTopPosition,
+ commentNumRightPosition,
+}) => {
return (