diff --git a/src/components/Blog/design1/index.js b/src/components/Blog/design1/index.js new file mode 100644 index 0000000..83be1e5 --- /dev/null +++ b/src/components/Blog/design1/index.js @@ -0,0 +1,66 @@ +import React from "react"; +import CommentIcon from "../../MiniComponents/CommentIcon"; + +const BlogDesign1 = ({ + blogTitle, + blogExcerpt, + featuredImage, + blogAuthor, + blogAuthorImg, + blogComments, +}) => { + return ( +
+ blogImage +
+
+ {blogTitle && ( +

+ {blogTitle} +

+ )} + {blogExcerpt && ( +

+ {blogExcerpt} +

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

{blogAuthor}

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

{blogComments}

+ +
+ )} +
+
+
+ ); +}; + +export default BlogDesign1; + +BlogDesign1.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +`, + + featuredImage: "images/blog-featured-image.jpg", + + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", + + blogComments: `زمان مطالعه 30 دقیقه`, +}; diff --git a/src/components/Blog/design2/index.js b/src/components/Blog/design2/index.js new file mode 100644 index 0000000..3e9a993 --- /dev/null +++ b/src/components/Blog/design2/index.js @@ -0,0 +1,103 @@ +import React from "react"; +import Button from "../../Button"; +import CommentIcon from "../../MiniComponents/CommentIcon"; +import NewTagDesign from "../../NewTagDesign"; + +const BlogDesign2 = ({ + blogTitle, + blogSubTitle, + featuredImage, + dateButton, + tagButton, + blogAuthor, + blogAuthorImg, + blogComments, +}) => { + return ( +
+ {dateButton && ( +
+ ); +}; + +export default BlogDesign2; + +BlogDesign2.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogSubTitle: `شما چه فکری می کنید`, + + featuredImage: "images/blog-featured-image2.jpg", + + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", + + blogComments: `زمان مطالعه 30 دقیقه`, + + dateButton: true, + tagButton: false, +}; diff --git a/src/components/Blog/design3/index.js b/src/components/Blog/design3/index.js new file mode 100644 index 0000000..6c9fbc3 --- /dev/null +++ b/src/components/Blog/design3/index.js @@ -0,0 +1,71 @@ +import React from "react"; +import CommentIcon from "../../MiniComponents/CommentIcon"; + +const BlogDesign3 = ({ + blogTitle, + blogSubTitle, + featuredImage, + blogAuthor, + blogAuthorImg, + blogComments, +}) => { + return ( +
+ {/* */} +
+ {blogTitle && ( +

+ {blogTitle} +

+ )} + {blogSubTitle && ( +

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

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

{blogAuthor}

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

{blogComments}

+ +
+ )} +
+
+
+ ); +}; + +export default BlogDesign3; + +BlogDesign3.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogSubTitle: `شما چه فکری می کنید`, + + featuredImage: "images/blog-featured-image2.jpg", + + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", + + blogComments: `زمان مطالعه 30 دقیقه`, +}; diff --git a/src/components/Blog/design4/index.js b/src/components/Blog/design4/index.js new file mode 100644 index 0000000..d9bf7fb --- /dev/null +++ b/src/components/Blog/design4/index.js @@ -0,0 +1,68 @@ +import React from "react"; +import CommentIcon from "../../MiniComponents/CommentIcon"; + +const BlogDesign4 = ({ + blogTitle, + blogExcerpt, + featuredImage, + blogAuthor, + blogAuthorImg, + blogComments, +}) => { + return ( +
+
+ +
+
+
+ {blogTitle && ( +

+ {blogTitle} +

+ )} + {blogExcerpt && ( +

+ {blogExcerpt} +

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

{blogAuthor}

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

{blogComments}

+ +
+ )} +
+
+
+ ); +}; + +export default BlogDesign4; + +BlogDesign4.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +`, + + featuredImage: "images/blog-featured-image.jpg", + + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", + + blogComments: `زمان مطالعه 30 دقیقه`, +}; diff --git a/src/components/Blog/design5/index.js b/src/components/Blog/design5/index.js new file mode 100644 index 0000000..1a8f0a9 --- /dev/null +++ b/src/components/Blog/design5/index.js @@ -0,0 +1,71 @@ +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 BlogDesign5 = ({ + blogTitle, + blogExcerpt, + featuredImage, + blogAuthor, + blogAuthorImg, + blogComments, +}) => { + return ( +
+ blogImage +
+
+ {blogTitle && ( +

+ {blogTitle} +

+ )} + {blogExcerpt && ( +

+ {blogExcerpt} +

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

{blogAuthor}

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

{blogComments}

+ +
+ )} +
+
+
+ ); +}; + +export default BlogDesign5; + +BlogDesign5.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +`, + + featuredImage: "images/blog-featured-image.jpg", + + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", + + blogComments: `زمان مطالعه 30 دقیقه`, +}; diff --git a/src/components/Blog/design6/index.js b/src/components/Blog/design6/index.js new file mode 100644 index 0000000..83bf6fa --- /dev/null +++ b/src/components/Blog/design6/index.js @@ -0,0 +1,63 @@ +import React from "react"; +import CommentIcon from "../../MiniComponents/CommentIcon"; + +const BlogDesign6 = ({ + blogTitle, + blogExcerpt, + featuredImage, + blogAuthor, + blogAuthorImg, + blogComments, +}) => { + return ( +
+ +
+ {blogTitle && ( +

+ {blogTitle} +

+ )} + {blogExcerpt && ( +

+ {blogExcerpt} +

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

{blogAuthor}

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

{blogComments}

+ +
+ )} +
+
+
+ ); +}; + +export default BlogDesign6; + +BlogDesign6.defaultProps = { + blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, + blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد + شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا + دیگران متوجه شوند. +`, + featuredImage: "images/article-featured-image.svg", + + blogAuthor: `حامد دژبانی نسب`, + blogAuthorImg: "images/blog-author.png", + + blogComments: `زمان مطالعه 30 دقیقه`, +}; diff --git a/src/components/Blog/index.js b/src/components/Blog/index.js new file mode 100644 index 0000000..2ae8f8d --- /dev/null +++ b/src/components/Blog/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/components/Blogs/assets/article-featured-image.svg b/src/components/Blogs/assets/article-featured-image.svg deleted file mode 100644 index 627c77b..0000000 --- a/src/components/Blogs/assets/article-featured-image.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/components/Blogs/assets/blog-author.png b/src/components/Blogs/assets/blog-author.png deleted file mode 100644 index f72fba7..0000000 Binary files a/src/components/Blogs/assets/blog-author.png and /dev/null differ diff --git a/src/components/Blogs/assets/blog-featured-image.jpg b/src/components/Blogs/assets/blog-featured-image.jpg deleted file mode 100644 index 7ef425d..0000000 Binary files a/src/components/Blogs/assets/blog-featured-image.jpg and /dev/null differ diff --git a/src/components/Blogs/assets/blog-featured-image2.jpg b/src/components/Blogs/assets/blog-featured-image2.jpg deleted file mode 100644 index f55e145..0000000 Binary files a/src/components/Blogs/assets/blog-featured-image2.jpg and /dev/null 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 deleted file mode 100644 index 7cd4bda..0000000 --- a/src/components/Blogs/assets/light-gray-comment-icon copy.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/Blogs/assets/light-gray-comment-icon.svg b/src/components/Blogs/assets/light-gray-comment-icon.svg deleted file mode 100644 index 7cd4bda..0000000 --- a/src/components/Blogs/assets/light-gray-comment-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/Blogs/assets/white-comment-icon.svg b/src/components/Blogs/assets/white-comment-icon.svg deleted file mode 100644 index d67df87..0000000 --- a/src/components/Blogs/assets/white-comment-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/Blogs/design1/BlogDesign1.js b/src/components/Blogs/design1/BlogDesign1.js deleted file mode 100644 index 45dcefe..0000000 --- a/src/components/Blogs/design1/BlogDesign1.js +++ /dev/null @@ -1,99 +0,0 @@ -import blogImage from "../../../assets/images/blog-featured-image.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"; - -const BlogDesign1 = ({ - blogExcerpt, - blogAuthor, - blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, -}) => { - return ( -
-
-

- طراحی بلاگ 1 -

-
-
-

- آدرس: - - blogs/design1{" "} - -

-
- {/* blog UI Design1 */} -
-
- -
-
-
-

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

- {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/design1/index.js b/src/components/Blogs/design1/index.js deleted file mode 100644 index 4cdbb4b..0000000 --- a/src/components/Blogs/design1/index.js +++ /dev/null @@ -1,97 +0,0 @@ -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 ( -
-
-

- طراحی بلاگ 1 -

-
-
-

- آدرس: - - blogs/design1{" "} - -

-
- {/* blog UI Design1 */} -
-
- -
-
-
-

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

- {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.css b/src/components/Blogs/design2/BlogDesign2.css deleted file mode 100644 index 7141da6..0000000 --- a/src/components/Blogs/design2/BlogDesign2.css +++ /dev/null @@ -1,12 +0,0 @@ -.child-text { - -webkit-transition: all 0.4s; - transition: all 0.4s; -} - -.parent:hover .child-text { - -webkit-transition: all 0.4s; - transition: all 0.4s; - -webkit-transform: translateY(-7px) !important; - transform: translateY(-7px) !important; -} -/*# sourceMappingURL=BlogDesign2.css.map */ \ No newline at end of file diff --git a/src/components/Blogs/design2/BlogDesign2.css.map b/src/components/Blogs/design2/BlogDesign2.css.map deleted file mode 100644 index 310f1c1..0000000 --- a/src/components/Blogs/design2/BlogDesign2.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "version": 3, - "mappings": "AAAA,AAAA,WAAW,CAAC;EACV,UAAU,EAAE,QAAQ;CACrB;;AACD,AAAA,OAAO,AAAA,MAAM,CAAC,WAAW,CAAC;EACxB,UAAU,EAAE,QAAQ;EACpB,SAAS,EAAE,gBAAgB,CAAC,UAAU;CACvC", - "sources": [ - "BlogDesign2.scss" - ], - "names": [], - "file": "BlogDesign2.css" -} \ No newline at end of file diff --git a/src/components/Blogs/design2/BlogDesign2.js b/src/components/Blogs/design2/BlogDesign2.js deleted file mode 100644 index faa1274..0000000 --- a/src/components/Blogs/design2/BlogDesign2.js +++ /dev/null @@ -1,141 +0,0 @@ -// it has style inside index.scss ---> // Start Blogs/Design2 Component && end Blogs/Design2 Component - -import React from "react"; - -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 playBtn from "./play-button.svg"; - -const BlogDesign2 = ({ - blogSubTitle, - dateButton, - tagButton, - blogAuthor, - blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, -}) => { - return ( -
- {/* title holder */} -
-

- طراحی بلاگ 2 -

-
-
-

- آدرس: - - blogs/design2 - -

-
- {/* blog UI Design2 */} -
- {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/design2/BlogDesign2.scss b/src/components/Blogs/design2/BlogDesign2.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Blogs/design2/index.js b/src/components/Blogs/design2/index.js deleted file mode 100644 index bfdbb77..0000000 --- a/src/components/Blogs/design2/index.js +++ /dev/null @@ -1,127 +0,0 @@ -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 ( -
- {/* title holder */} -
-

- طراحی بلاگ 2 -

-
-
-

- آدرس: - - blogs/design2 - -

-
- {/* blog UI Design2 */} -
- {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/design2/play-button.svg b/src/components/Blogs/design2/play-button.svg deleted file mode 100644 index 1be0b07..0000000 --- a/src/components/Blogs/design2/play-button.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Blogs/design3/BlogDesign3.js b/src/components/Blogs/design3/BlogDesign3.js deleted file mode 100644 index 253d81a..0000000 --- a/src/components/Blogs/design3/BlogDesign3.js +++ /dev/null @@ -1,124 +0,0 @@ -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/light-gray-comment-icon.svg"; -import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; - -const BlogDesign3 = ({ - blogSubTitle, - blogAuthor, - blogComments, - blogTitleColor, - blogCommentAuthorTextColor, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, -}) => { - return ( -
- {/* title holder */} -
-

- طراحی بلاگ 3 -

-
-
-

- آدرس: - - blogs/design3 - -

-
- {/* blog UI Design3 */} -
- {/* */} -
-

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

- {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/design3/index.js b/src/components/Blogs/design3/index.js deleted file mode 100644 index 1c2e210..0000000 --- a/src/components/Blogs/design3/index.js +++ /dev/null @@ -1,122 +0,0 @@ -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 ( -
- {/* title holder */} -
-

- طراحی بلاگ 3 -

-
-
-

- آدرس: - - blogs/design3 - -

-
- {/* blog UI Design3 */} -
- {/* */} -
-

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

- {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/BlogDesign4.js b/src/components/Blogs/design4/BlogDesign4.js deleted file mode 100644 index 4bc04ba..0000000 --- a/src/components/Blogs/design4/BlogDesign4.js +++ /dev/null @@ -1,102 +0,0 @@ -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/light-gray-comment-icon.svg"; -import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; - -const BlogDesign4 = ({ - blogExcerpt, - blogAuthor, - blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, -}) => { - return ( -
- {/* title holder */} -
-

- طراحی بلاگ 4 -

-
-
-

- آدرس: - - blogs/design4 - -

-
- {/* blog UI Design4 */} -
-
- -
-
-
-

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

- {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/design4/index.js b/src/components/Blogs/design4/index.js deleted file mode 100644 index cc812e6..0000000 --- a/src/components/Blogs/design4/index.js +++ /dev/null @@ -1,100 +0,0 @@ -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 ( -
- {/* title holder */} -
-

- طراحی بلاگ 4 -

-
-
-

- آدرس: - - blogs/design4 - -

-
- {/* blog UI Design4 */} -
-
- -
-
-
-

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

- {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/BlogDesign5.js b/src/components/Blogs/design5/BlogDesign5.js deleted file mode 100644 index 083ef51..0000000 --- a/src/components/Blogs/design5/BlogDesign5.js +++ /dev/null @@ -1,102 +0,0 @@ -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/light-gray-comment-icon.svg"; -import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; - -const BlogDesign5 = ({ - blogExcerpt, - blogAuthor, - blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, -}) => { - return ( -
- {/* title holder */} -
-

- طراحی بلاگ 5 -

-
-
-

- آدرس: - - blogs/design5 - -

-
- {/* blog UI Design5 */} -
-
- -
-
-
-

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

- {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/design5/index.js b/src/components/Blogs/design5/index.js deleted file mode 100644 index 1897e8b..0000000 --- a/src/components/Blogs/design5/index.js +++ /dev/null @@ -1,101 +0,0 @@ -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 ( -
- {/* title holder */} -
-

- طراحی بلاگ 5 -

-
-
-

- آدرس: - - blogs/design5 - -

-
- {/* blog UI Design5 */} -
-
- -
-
-
-

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

- {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/BlogDesign6.js b/src/components/Blogs/design6/BlogDesign6.js deleted file mode 100644 index 0b75388..0000000 --- a/src/components/Blogs/design6/BlogDesign6.js +++ /dev/null @@ -1,100 +0,0 @@ -import React from "react"; - -import blogImage from "../../../assets/images/blog-featured-image.jpg"; -import blogAuthorImg from "../../../assets/images/blog-author.png"; - -import FeaturedImage from "../../../assets/images/article-featured-image.svg"; - -import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg"; -import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; - -const BlogDesign6 = ({ - blogExcerpt, - blogAuthor, - blogComments, - commentNumBgColor, - commentNumTextColor, - commentNumTopPosition, - commentNumRightPosition, -}) => { - return ( -
- {/* title holder */} -
-

- طراحی بلاگ 6 -

-
-
-

- آدرس: - - blogs/design6 - -

-
- {/* blog UI Design6 */} -
- -
-

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

- {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/design6/index.js b/src/components/Blogs/design6/index.js deleted file mode 100644 index 4adc1e1..0000000 --- a/src/components/Blogs/design6/index.js +++ /dev/null @@ -1,98 +0,0 @@ -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 ( -
- {/* title holder */} -
-

- طراحی بلاگ 6 -

-
-
-

- آدرس: - - blogs/design6 - -

-
- {/* blog UI Design6 */} -
- -
-

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

- {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 deleted file mode 100644 index c51c79e..0000000 --- a/src/components/Blogs/index.js +++ /dev/null @@ -1,33 +0,0 @@ -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/Blogss/assets/article-featured-image.svg b/src/components/Blogss/assets/article-featured-image.svg deleted file mode 100644 index 627c77b..0000000 --- a/src/components/Blogss/assets/article-featured-image.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/components/Blogss/assets/blog-author.png b/src/components/Blogss/assets/blog-author.png deleted file mode 100644 index f72fba7..0000000 Binary files a/src/components/Blogss/assets/blog-author.png and /dev/null differ diff --git a/src/components/Blogss/assets/blog-featured-image.jpg b/src/components/Blogss/assets/blog-featured-image.jpg deleted file mode 100644 index 7ef425d..0000000 Binary files a/src/components/Blogss/assets/blog-featured-image.jpg and /dev/null differ diff --git a/src/components/Blogss/assets/blog-featured-image2.jpg b/src/components/Blogss/assets/blog-featured-image2.jpg deleted file mode 100644 index f55e145..0000000 Binary files a/src/components/Blogss/assets/blog-featured-image2.jpg and /dev/null 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 deleted file mode 100644 index 7cd4bda..0000000 --- a/src/components/Blogss/assets/light-gray-comment-icon copy.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/Blogss/assets/light-gray-comment-icon.svg b/src/components/Blogss/assets/light-gray-comment-icon.svg deleted file mode 100644 index 7cd4bda..0000000 --- a/src/components/Blogss/assets/light-gray-comment-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/Blogss/assets/white-comment-icon.svg b/src/components/Blogss/assets/white-comment-icon.svg deleted file mode 100644 index d67df87..0000000 --- a/src/components/Blogss/assets/white-comment-icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - -