diff --git a/public/images/blog-author.png b/public/images/blog-author.png new file mode 100644 index 0000000..f72fba7 Binary files /dev/null and b/public/images/blog-author.png differ diff --git a/public/images/blog-featured-image.jpg b/public/images/blog-featured-image.jpg new file mode 100644 index 0000000..7ef425d Binary files /dev/null and b/public/images/blog-featured-image.jpg differ diff --git a/public/images/index.js b/public/images/index.js new file mode 100644 index 0000000..f61f659 --- /dev/null +++ b/public/images/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/public/images/light-gray-comment-icon.svg b/public/images/light-gray-comment-icon.svg new file mode 100644 index 0000000..7cd4bda --- /dev/null +++ b/public/images/light-gray-comment-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/Views/Home/Main/index.js b/src/Views/Home/Main/index.js index 6c3e666..7ee156a 100644 --- a/src/Views/Home/Main/index.js +++ b/src/Views/Home/Main/index.js @@ -8,7 +8,7 @@ function Main({ activeComponent }) { return (
-
+

{activeComponent?.content?.name}

diff --git a/src/Views/Home/Sidebar/index.js b/src/Views/Home/Sidebar/index.js index e4c85fb..1316723 100644 --- a/src/Views/Home/Sidebar/index.js +++ b/src/Views/Home/Sidebar/index.js @@ -4,7 +4,7 @@ import { components } from "../../../redux/actions"; function Sidebar({ list, setActive }) { return ( -
+
+ + + + + + + diff --git a/src/components/Blogss/assets/blog-author.png b/src/components/Blogss/assets/blog-author.png new file mode 100644 index 0000000..f72fba7 Binary files /dev/null and b/src/components/Blogss/assets/blog-author.png differ diff --git a/src/components/Blogss/assets/blog-featured-image.jpg b/src/components/Blogss/assets/blog-featured-image.jpg new file mode 100644 index 0000000..7ef425d Binary files /dev/null and b/src/components/Blogss/assets/blog-featured-image.jpg differ diff --git a/src/components/Blogss/assets/blog-featured-image2.jpg b/src/components/Blogss/assets/blog-featured-image2.jpg new file mode 100644 index 0000000..f55e145 Binary files /dev/null and b/src/components/Blogss/assets/blog-featured-image2.jpg differ diff --git a/src/components/Blogss/assets/light-gray-comment-icon copy.svg b/src/components/Blogss/assets/light-gray-comment-icon copy.svg new file mode 100644 index 0000000..7cd4bda --- /dev/null +++ b/src/components/Blogss/assets/light-gray-comment-icon copy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Blogss/assets/light-gray-comment-icon.svg b/src/components/Blogss/assets/light-gray-comment-icon.svg new file mode 100644 index 0000000..7cd4bda --- /dev/null +++ b/src/components/Blogss/assets/light-gray-comment-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Blogss/assets/white-comment-icon.svg b/src/components/Blogss/assets/white-comment-icon.svg new file mode 100644 index 0000000..d67df87 --- /dev/null +++ b/src/components/Blogss/assets/white-comment-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Blogss/design1/index.js b/src/components/Blogss/design1/index.js new file mode 100644 index 0000000..0a7ab01 --- /dev/null +++ b/src/components/Blogss/design1/index.js @@ -0,0 +1,81 @@ +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 ( +
+
+ blogImage +
+
+
+

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

+ {blogExcerpt && ( +

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

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

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

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

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

+
+ + + 26 + +
+
+ )} +
+
+
+ ); +}; + +export default BlogDesign1; + +BlogDesign1.defaultProps = { + blogExcerpt: true, + blogAuthor: true, + blogComments: true, + + commentNumBgColor: "bg-[#818181]", + commentNumTextColor: "text-white", + commentNumTopPosition: "-top-2", + commentNumRightPosition: "-right-2", +}; diff --git a/src/components/Blogss/design2/BlogDesign2.scss b/src/components/Blogss/design2/BlogDesign2.scss new file mode 100644 index 0000000..a175b31 --- /dev/null +++ b/src/components/Blogss/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/Blogss/design2/index.js b/src/components/Blogss/design2/index.js new file mode 100644 index 0000000..c404b2c --- /dev/null +++ b/src/components/Blogss/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/Blogss/design3/index.js b/src/components/Blogss/design3/index.js new file mode 100644 index 0000000..4c07090 --- /dev/null +++ b/src/components/Blogss/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/Blogss/design4/index.js b/src/components/Blogss/design4/index.js new file mode 100644 index 0000000..b3f4fb7 --- /dev/null +++ b/src/components/Blogss/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/Blogss/design5/index.js b/src/components/Blogss/design5/index.js new file mode 100644 index 0000000..ece4bcc --- /dev/null +++ b/src/components/Blogss/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/Blogss/design6/index.js b/src/components/Blogss/design6/index.js new file mode 100644 index 0000000..605cf3f --- /dev/null +++ b/src/components/Blogss/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/Blogss/index.js b/src/components/Blogss/index.js new file mode 100644 index 0000000..335a59d --- /dev/null +++ b/src/components/Blogss/index.js @@ -0,0 +1,35 @@ +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/redux/data.js b/src/redux/data.js index 8e67f55..911a531 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -6,6 +6,7 @@ import Advertisements from "../components/Advertisements"; import Alert from "../components/Alert"; import Toast from "../components/Toast"; import Banners from "../components/Banners"; +import Blogss from "../components/Blogss"; // import ButtonDesign from "./components/buttonDesign/ButtonDesign"; // import ProductDesign from "./components/productDesign/ProductDesign"; @@ -177,6 +178,16 @@ const components = [ code: null, }, }, + { + name: "Blogss", + author: "Andalib", + props: [], + content: { + name: "Blog Designs", + component: , + code: null, + }, + }, ]; export default components;