diff --git a/public/images/article-featured-image.svg b/public/images/article-featured-image.svg new file mode 100644 index 0000000..627c77b --- /dev/null +++ b/public/images/article-featured-image.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Blogss/design4/index.js b/src/components/Blogss/design4/index.js index b3f4fb7..d9bf7fb 100644 --- a/src/components/Blogss/design4/index.js +++ b/src/components/Blogss/design4/index.js @@ -1,85 +1,68 @@ import React from "react"; - -import blogImage from "../assets/blog-featured-image.jpg"; -import blogAuthorImg from "../assets/blog-author.png"; -import commentIcon from "../assets/light-gray-comment-icon.svg"; +import CommentIcon from "../../MiniComponents/CommentIcon"; const BlogDesign4 = ({ + blogTitle, blogExcerpt, + featuredImage, blogAuthor, + blogAuthorImg, blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, }) => { return ( -
-
-
- -
-
-
-

- آیا مواد غذای پر فیبر و مفید هستند؟ +
+
+ +
+
+
+ {blogTitle && ( +

+ {blogTitle}

- {blogExcerpt && ( -

- در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته - خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند - کند تا دیگران متوجه شوند. -

- )} -
-
- {blogAuthor && ( -
- -

- حامد دژبانی نسب -

-
- )} - {blogComments && ( -
-

- زمان مطالعه 30 دقیقه -

-
- - - 26 - -
-
- )} -
+ )} + {blogExcerpt && ( +

+ {blogExcerpt} +

+ )} +
+
+ {blogAuthor && ( +
+ author +

{blogAuthor}

+
+ )} + {blogComments && ( +
+

{blogComments}

+ +
+ )}
-

+ ); }; export default BlogDesign4; -// background color i used in commnet number background color -// bg-lightGrayBgColor -// bg-white +BlogDesign4.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +`, -// text color i used for comment number text color: -// text-grayTextColor -// text-white + featuredImage: "images/blog-featured-image.jpg", -BlogDesign4.defaultProps = { - blogExcerpt: true, - blogAuthor: true, - blogComments: true, + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", - commentNumBgColor: "bg-lightGrayBgColor", - commentNumTextColor: "text-white", - commentNumTopPosition: "-top-2", - commentNumRightPosition: "-right-2", + blogComments: `زمان مطالعه 30 دقیقه`, }; diff --git a/src/components/Blogss/design5/index.js b/src/components/Blogss/design5/index.js index ece4bcc..1a8f0a9 100644 --- a/src/components/Blogss/design5/index.js +++ b/src/components/Blogss/design5/index.js @@ -4,83 +4,68 @@ import blogImage from "../assets/blog-featured-image.jpg"; import blogAuthorImg from "../assets/blog-author.png"; import commentIcon from "../assets/light-gray-comment-icon.svg"; +import CommentIcon from "../../MiniComponents/CommentIcon"; const BlogDesign5 = ({ + blogTitle, blogExcerpt, + featuredImage, blogAuthor, + blogAuthorImg, blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, }) => { return ( -
-
-
- -
-
-
-

- آیا مواد غذای پر فیبر و مفید هستند؟ +
+ blogImage +
+
+ {blogTitle && ( +

+ {blogTitle}

- {blogExcerpt && ( -

- در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته - خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند - کند تا دیگران متوجه شوند. -

- )} -
-
- {blogAuthor && ( -
- -

- حامد دژبانی نسب -

-
- )} - {blogComments && ( -
-

- زمان مطالعه 30 دقیقه -

-
- - - 26 - -
-
- )} -
+ )} + {blogExcerpt && ( +

+ {blogExcerpt} +

+ )} +
+
+ {blogAuthor && ( +
+ author +

{blogAuthor}

+
+ )} + {blogComments && ( +
+

{blogComments}

+ +
+ )}
-

+ ); }; export default BlogDesign5; -// background color i used in commnet number background color -// bg-lightGrayBgColor -// bg-white +BlogDesign5.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +`, -// text color i used for comment number text color: -// text-grayTextColor -// text-white + featuredImage: "images/blog-featured-image.jpg", -BlogDesign5.defaultProps = { - blogExcerpt: true, - blogAuthor: true, - blogComments: true, + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", - commentNumBgColor: "bg-lightGrayBgColor", - commentNumTextColor: "text-white", - commentNumTopPosition: "-top-2", - commentNumRightPosition: "-right-2", + blogComments: `زمان مطالعه 30 دقیقه`, }; diff --git a/src/components/Blogss/design6/index.js b/src/components/Blogss/design6/index.js index 605cf3f..83bf6fa 100644 --- a/src/components/Blogss/design6/index.js +++ b/src/components/Blogss/design6/index.js @@ -1,81 +1,63 @@ import React from "react"; - -import blogAuthorImg from "../assets/blog-author.png"; -import FeaturedImage from "../assets/article-featured-image.svg"; -import commentIcon from "../assets/light-gray-comment-icon.svg"; +import CommentIcon from "../../MiniComponents/CommentIcon"; const BlogDesign6 = ({ + blogTitle, blogExcerpt, + featuredImage, blogAuthor, + blogAuthorImg, blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, }) => { return ( -
-
- -
-

- آیا مواد غذای پر فیبر و مفید هستند؟ +
+ +
+ {blogTitle && ( +

+ {blogTitle}

- {blogExcerpt && ( -

- در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد - شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا - دیگران متوجه شوند. -

+ )} + {blogExcerpt && ( +

+ {blogExcerpt} +

+ )} +
+ {blogAuthor && ( +
+ author +

{blogAuthor}

+
+ )} + {blogComments && ( +
+

{blogComments}

+ +
)} -
- {blogAuthor && ( -
- -

- حامد دژبانی نسب -

-
- )} - {blogComments && ( -
-

- زمان مطالعه 30 دقیقه -

-
- - - 26 - -
-
- )} -
-

+ ); }; export default BlogDesign6; -// 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 - BlogDesign6.defaultProps = { - blogExcerpt: true, - blogAuthor: true, - blogComments: true, + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +`, + featuredImage: "images/article-featured-image.svg", + + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", - commentNumBgColor: "bg-lightGrayBgColor", - commentNumTextColor: "text-white", - commentNumTopPosition: "-top-2", - commentNumRightPosition: "-right-2", + blogComments: `زمان مطالعه 30 دقیقه`, };