diff --git a/src/components/Blogs/assets/article-featured-image.svg b/src/components/Blogs/assets/article-featured-image.svg new file mode 100644 index 0000000..627c77b --- /dev/null +++ b/src/components/Blogs/assets/article-featured-image.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Blogs/assets/blog-author.png b/src/components/Blogs/assets/blog-author.png new file mode 100644 index 0000000..f72fba7 Binary files /dev/null and b/src/components/Blogs/assets/blog-author.png differ diff --git a/src/components/Blogs/assets/blog-featured-image.jpg b/src/components/Blogs/assets/blog-featured-image.jpg new file mode 100644 index 0000000..7ef425d Binary files /dev/null and b/src/components/Blogs/assets/blog-featured-image.jpg differ diff --git a/src/components/Blogs/assets/blog-featured-image2.jpg b/src/components/Blogs/assets/blog-featured-image2.jpg new file mode 100644 index 0000000..f55e145 Binary files /dev/null and b/src/components/Blogs/assets/blog-featured-image2.jpg differ diff --git a/src/components/Blogs/assets/light-gray-comment-icon copy.svg b/src/components/Blogs/assets/light-gray-comment-icon copy.svg new file mode 100644 index 0000000..7cd4bda --- /dev/null +++ b/src/components/Blogs/assets/light-gray-comment-icon copy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Blogs/assets/light-gray-comment-icon.svg b/src/components/Blogs/assets/light-gray-comment-icon.svg new file mode 100644 index 0000000..7cd4bda --- /dev/null +++ b/src/components/Blogs/assets/light-gray-comment-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Blogs/assets/white-comment-icon.svg b/src/components/Blogs/assets/white-comment-icon.svg new file mode 100644 index 0000000..d67df87 --- /dev/null +++ b/src/components/Blogs/assets/white-comment-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Blogs/design1/index.js b/src/components/Blogs/design1/index.js new file mode 100644 index 0000000..f61f659 --- /dev/null +++ b/src/components/Blogs/design1/index.js @@ -0,0 +1,83 @@ +import blogImage from "../assets/blog-featured-image.jpg"; +import blogAuthorImg from "../assets/blog-author.png"; +import commentIcon from "../assets/light-gray-comment-icon.svg"; + +const BlogDesign1 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { + return ( +
+
+
+ +
+
+
+

+ آیا مواد غذای پر فیبر و مفید هستند؟ +

+ {blogExcerpt && ( +

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

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

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

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

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

+
+ + + 26 + +
+
+ )} +
+
+
+
+ ); +}; + +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.scss b/src/components/Blogs/design2/BlogDesign2.scss new file mode 100644 index 0000000..a175b31 --- /dev/null +++ b/src/components/Blogs/design2/BlogDesign2.scss @@ -0,0 +1,7 @@ +.child-text { + transition: all 0.4s; +} +.parent:hover .child-text { + transition: all 0.4s; + transform: translateY(-7px) !important; +} diff --git a/src/components/Blogs/design2/index.js b/src/components/Blogs/design2/index.js new file mode 100644 index 0000000..c404b2c --- /dev/null +++ b/src/components/Blogs/design2/index.js @@ -0,0 +1,112 @@ +import React from "react"; + +import "./BlogDesign2.scss"; + +import blogFeaturedImage2 from "../assets/blog-featured-image2.jpg"; +import blogAuthorImg from "../assets/blog-author.png"; +import whiteCommentIcon from "../assets/white-comment-icon.svg"; + +const BlogDesign2 = ({ + blogSubTitle, + dateButton, + tagButton, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { + return ( +
+
+ {dateButton && ( + + )} + {tagButton && ( + + )} +
+

+ آیا مواد غذایی پر فیبر مفید هستند؟ +

+ {blogSubTitle && ( +

+ شما چه فکری می کنید +

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

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

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

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

+
+ + + 26 + +
+
+ )} +
+
+
+
+ ); +}; + +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/index.js b/src/components/Blogs/design3/index.js new file mode 100644 index 0000000..4c07090 --- /dev/null +++ b/src/components/Blogs/design3/index.js @@ -0,0 +1,107 @@ +import React from "react"; + +import blogFeaturedImage2 from "../assets/blog-featured-image2.jpg"; +import blogAuthorImg from "../assets/blog-author.png"; +import commentIcon from "../assets/light-gray-comment-icon.svg"; + +const BlogDesign3 = ({ + blogSubTitle, + blogAuthor, + blogComments, + blogTitleColor, + blogCommentAuthorTextColor, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { + return ( +
+
+ {/* */} +
+

+ آیا مواد غذای پر فیبر و مفید هستند؟ +

+ {blogSubTitle && ( +

+ نظر شما چیه +

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

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

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

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

+
+ + + 26 + +
+
+ )} +
+
+
+
+ ); +}; + +export default BlogDesign3; + +//different text colors i used: +// text-darkBlueTextColor2 +// 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", + + 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/index.js b/src/components/Blogs/design4/index.js new file mode 100644 index 0000000..b3f4fb7 --- /dev/null +++ b/src/components/Blogs/design4/index.js @@ -0,0 +1,85 @@ +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"; + +const BlogDesign4 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { + return ( +
+
+
+ +
+
+
+

+ آیا مواد غذای پر فیبر و مفید هستند؟ +

+ {blogExcerpt && ( +

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

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

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

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

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

+
+ + + 26 + +
+
+ )} +
+
+
+
+ ); +}; + +export default BlogDesign4; + +// 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 + +BlogDesign4.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/design5/index.js b/src/components/Blogs/design5/index.js new file mode 100644 index 0000000..ece4bcc --- /dev/null +++ b/src/components/Blogs/design5/index.js @@ -0,0 +1,86 @@ +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"; + +const BlogDesign5 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { + return ( +
+
+
+ +
+
+
+

+ آیا مواد غذای پر فیبر و مفید هستند؟ +

+ {blogExcerpt && ( +

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

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

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

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

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

+
+ + + 26 + +
+
+ )} +
+
+
+
+ ); +}; + +export default BlogDesign5; + +// 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 + +BlogDesign5.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/design6/index.js b/src/components/Blogs/design6/index.js new file mode 100644 index 0000000..605cf3f --- /dev/null +++ b/src/components/Blogs/design6/index.js @@ -0,0 +1,81 @@ +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"; + +const BlogDesign6 = ({ + blogExcerpt, + blogAuthor, + blogComments, + commentNumBgColor, + commentNumTextColor, + commentNumTopPosition, + commentNumRightPosition, +}) => { + return ( +
+
+ +
+

+ آیا مواد غذای پر فیبر و مفید هستند؟ +

+ {blogExcerpt && ( +

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

+ )} +
+ {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, + + commentNumBgColor: "bg-lightGrayBgColor", + commentNumTextColor: "text-white", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", +}; diff --git a/src/components/Blogs/index.js b/src/components/Blogs/index.js new file mode 100644 index 0000000..912e580 --- /dev/null +++ b/src/components/Blogs/index.js @@ -0,0 +1,33 @@ +import React, {useState} from 'react'; +import Blog1 from './design1'; +import Blog2 from './design2'; +import Blog3 from './design3'; +import Blog4 from './design4'; +import Blog5 from './design5'; +import Blog6 from './design6'; + +function Blogs() { + const list = { + 1 : , + 2 : , + 3 : , + 4 : , + 5 : , + 6 : + } + const [type, setType] = useState(1); + return ( +
+ + { + list[type] + } +
+ ) +} + +export default Blogs diff --git a/src/components/Features/index.js b/src/components/Features/index.js index 7be2267..af62919 100644 --- a/src/components/Features/index.js +++ b/src/components/Features/index.js @@ -10,14 +10,12 @@ import plane from "./plane.svg"; const Features = ({ features }) => { return (
- {/* top */}

امکانات و ویژگی ها

{features.map((feature, index) => (
- {/* 1 */}
{ >
- {/* 2 */}
{feature.title} @@ -44,7 +41,6 @@ const Features = ({ features }) => {
))}
- {/* footer */}

diff --git a/src/redux/data.js b/src/redux/data.js index f18390d..7ef0ab6 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -28,6 +28,7 @@ import RangeDatePicker from '../components/RangeDatePicker'; import Comments from "../components/Comments"; import Feedback from "../components/Feedback"; import Features from '../components/Features'; +import Blogs from "../components/Blogs"; const components = [ { @@ -532,6 +533,16 @@ const components = [ code: null, }, }, + { + name: "Blogs", + author: "Andalib", + props: [], + content: { + name: "Blogs", + component: , + code: null, + }, + }, ]; export default components;