mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

delete 31 files and update 1 file

Browse Source
master
mahdi andalib 3 years ago
parent e7e6d8d8ce
commit 3e01af5635
38 changed files with 477 additions and 1452 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/components/Blog/design1/index.js
  2. 103
      src/components/Blog/design2/index.js
  3. 71
      src/components/Blog/design3/index.js
  4. 68
      src/components/Blog/design4/index.js
  5. 71
      src/components/Blog/design5/index.js
  6. 63
      src/components/Blog/design6/index.js
  7. 35
      src/components/Blog/index.js
  8. 8
      src/components/Blogs/assets/article-featured-image.svg
  9. BIN
      src/components/Blogs/assets/blog-author.png
  10. BIN
      src/components/Blogs/assets/blog-featured-image.jpg
  11. BIN
      src/components/Blogs/assets/blog-featured-image2.jpg
  12. 11
      src/components/Blogs/assets/light-gray-comment-icon copy.svg
  13. 11
      src/components/Blogs/assets/light-gray-comment-icon.svg
  14. 11
      src/components/Blogs/assets/white-comment-icon.svg
  15. 99
      src/components/Blogs/design1/BlogDesign1.js
  16. 97
      src/components/Blogs/design1/index.js
  17. 12
      src/components/Blogs/design2/BlogDesign2.css
  18. 9
      src/components/Blogs/design2/BlogDesign2.css.map
  19. 141
      src/components/Blogs/design2/BlogDesign2.js
  20. 0
      src/components/Blogs/design2/BlogDesign2.scss
  21. 127
      src/components/Blogs/design2/index.js
  22. 3
      src/components/Blogs/design2/play-button.svg
  23. 124
      src/components/Blogs/design3/BlogDesign3.js
  24. 122
      src/components/Blogs/design3/index.js
  25. 102
      src/components/Blogs/design4/BlogDesign4.js
  26. 100
      src/components/Blogs/design4/index.js
  27. 102
      src/components/Blogs/design5/BlogDesign5.js
  28. 101
      src/components/Blogs/design5/index.js
  29. 100
      src/components/Blogs/design6/BlogDesign6.js
  30. 98
      src/components/Blogs/design6/index.js
  31. 33
      src/components/Blogs/index.js
  32. 8
      src/components/Blogss/assets/article-featured-image.svg
  33. BIN
      src/components/Blogss/assets/blog-author.png
  34. BIN
      src/components/Blogss/assets/blog-featured-image.jpg
  35. BIN
      src/components/Blogss/assets/blog-featured-image2.jpg
  36. 11
      src/components/Blogss/assets/light-gray-comment-icon copy.svg
  37. 11
      src/components/Blogss/assets/light-gray-comment-icon.svg
  38. 11
      src/components/Blogss/assets/white-comment-icon.svg

66
src/components/Blog/design1/index.js
Unescape View File

@ -0,0 +1,66 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign1 = ({
blogTitle,
blogExcerpt,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div className="w-fit flex items-strech justify-around p-4 bg-white">
<img src={featuredImage} alt="blogImage" className="shrink" />
<div className="flex-1 flex flex-col justify-between mr-4 py-2">
<div className="flex flex-col">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
</div>
<div className="w-full flex item-center justify-between mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign1;
BlogDesign1.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/blog-featured-image.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

103
src/components/Blog/design2/index.js
Unescape View File

@ -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 (
<div
className="group min-w-[550px] relative flex flex-col justify-end p-4 cursor-pointer"
style={{
backgroundImage: `url(${featuredImage})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{dateButton && (
<Button
text={"1400/09/19"}
className={
"w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
}
/>
)}
{tagButton && (
<NewTagDesign
title={"تگ"}
icon={false}
tagClassName={
"w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
}
/>
)}
<div className="transition-all duration-300 transfrom group-hover:-translate-y-1 z-10">
{blogTitle && (
<h2 className="text-base text-justify text-white font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogSubTitle && (
<h2 className="text-white text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید
</h2>
)}
</div>
<div className="w-full flex item-center justify-between mt-4 z-10">
{blogAuthor && (
<div className="flex items-center transition duration-200 transform hover:-translate-y-1">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-white">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-white">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
icon={"images/white-comment-icon.svg"}
commentNum={"26"}
className="w-5 h-5 bg-white text-[#818181] text-[10px] border-[#818181] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
<div
style={{
zIndex: 0,
background:
"linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(2,0,36,0) 100%)",
}}
className="absolute right-0 bottom-0 h-full w-full"
></div>
</div>
);
};
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,
};

71
src/components/Blog/design3/index.js
Unescape View File

@ -0,0 +1,71 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign3 = ({
blogTitle,
blogSubTitle,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div
className="min-w-[550px] relative flex flex-col justify-end p-3"
style={{
backgroundImage: `url(${featuredImage})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
{blogTitle && (
<h2 className="text-[#646464] text-base text-justify font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogSubTitle && (
<h2 className="text-[#646464] text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید
</h2>
)}
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#2a2a2a]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#2a2a2a]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign3;
BlogDesign3.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogSubTitle: `شما چه فکری می کنید`,
featuredImage: "images/blog-featured-image2.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

68
src/components/Blog/design4/index.js
Unescape View File

@ -0,0 +1,68 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign4 = ({
blogTitle,
blogExcerpt,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div className="flex items-strech justify-between p-4 bg-white rounded-xl border border-gray-300">
<div className="transform translate-x-1/3">
<img src={featuredImage} alt="" className="w-full h-full " />
</div>
<div className="flex-1 flex flex-col justify-between py-3 transform translate-x-10">
<div className="flex flex-col">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
</div>
<div className=" flex item-center justify-between">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign4;
BlogDesign4.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/blog-featured-image.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

71
src/components/Blog/design5/index.js
Unescape View File

@ -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 (
<div className="flex items-strech justify-around p-4 rounded-md shadow-md bg-white">
<img src={featuredImage} alt="blogImage" />
<div className="flex-1 flex flex-col justify-between mr-4 py-2">
<div className="flex flex-col">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
</div>
<div className="w-full flex item-center justify-between mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign5;
BlogDesign5.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/blog-featured-image.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

63
src/components/Blog/design6/index.js
Unescape View File

@ -0,0 +1,63 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign6 = ({
blogTitle,
blogExcerpt,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div className="flex flex-col p-4 bg-white rounded-md shadow-md">
<img src={featuredImage} alt="" className="w-full" />
<div className="p-4">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
<div className="w-full flex item-center justify-between mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign6;
BlogDesign6.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/article-featured-image.svg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

35
src/components/Blog/index.js
Unescape View File

@ -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: <Blog1 />,
2: <Blog2 />,
3: <Blog3 />,
4: <Blog4 />,
5: <Blog5 />,
6: <Blog6 />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="w-20 bg-gray-200 mb-10"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default Blogs;

8
src/components/Blogs/assets/article-featured-image.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 166 KiB

BIN
src/components/Blogs/assets/blog-author.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/components/Blogs/assets/blog-featured-image.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

BIN
src/components/Blogs/assets/blog-featured-image2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 120 KiB

11
src/components/Blogs/assets/light-gray-comment-icon copy.svg
Unescape View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

11
src/components/Blogs/assets/light-gray-comment-icon.svg
Unescape View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

11
src/components/Blogs/assets/white-comment-icon.svg
Unescape View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

99
src/components/Blogs/design1/BlogDesign1.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 1
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design1{" "}
</span>
</p>
</div>
{/* blog UI Design1 */}
<div className="flex items-strech justify-around p-2">
<div className="w-2/5">
<img src={blogImage} alt="" className="w-full h-full" />
</div>
<div className="w-3/5 mr-4 flex flex-col justify-between py-2">
<div>
<h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm leading-6 my-1 text-grayTextColor mt-3">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
کند تا دیگران متوجه شوند.
</p>
)}
</div>
<div className="flex item-center justify-between w-full mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor mr-2 font-light">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="text-sm text-lightGrayTextColor ml-2 font-light">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

97
src/components/Blogs/design1/index.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 1
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design1{" "}
</span>
</p>
</div>
{/* blog UI Design1 */}
<div className="flex items-strech justify-around p-2">
<div className="w-2/5">
<img src={blogImage} alt="" className="w-full h-full" />
</div>
<div className="w-3/5 mr-4 flex flex-col justify-between py-2">
<div>
<h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm leading-6 my-1 text-grayTextColor mt-3">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
کند تا دیگران متوجه شوند.
</p>
)}
</div>
<div className="flex item-center justify-between w-full mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor mr-2 font-light">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="text-sm text-lightGrayTextColor ml-2 font-light">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

12
src/components/Blogs/design2/BlogDesign2.css
Unescape View File

@ -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 */

9
src/components/Blogs/design2/BlogDesign2.css.map
Unescape View File

@ -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"
}

141
src/components/Blogs/design2/BlogDesign2.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-green-100 p-2 rounded text-base">
طراحی بلاگ 2
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design2
</span>
</p>
</div>
{/* blog UI Design2 */}
<div
className="parent relative flex flex-col justify-end p-3 cursor-pointer"
style={{
backgroundImage: `url(${blogFeaturedImage2})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
backgroundColor: "red",
}}
>
{dateButton && (
<button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
1400/09/19
</button>
)}
{tagButton && (
<button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
تگ
</button>
)}
<div className="z-10 child-text">
<h2 className="text-white text-base font-sansbold leading-6">
آیا مواد غذایی پر فیبر مفید هستند؟
</h2>
{blogSubTitle && (
<h2 className="text-white text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید
</h2>
)}
</div>
<div className="z-10 flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className="flex items-center transition duration-200 transform hover:-translate-y-1">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-white font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="text-sm text-white font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={whiteCommentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
<div
style={{
zIndex: 0,
background:
"linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(2,0,36,0) 100%)",
}}
className="absolute right-0 bottom-0 h-full w-full"
></div>
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div
className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-playButtonIcon`}
>
<img src={playBtn} alt="" />
</div>
</div>
</div>
</section>
);
};
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",
};

0
src/components/Blogs/design2/BlogDesign2.scss
Unescape View File

127
src/components/Blogs/design2/index.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-green-100 p-2 rounded text-base">
طراحی بلاگ 2
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design2
</span>
</p>
</div>
{/* blog UI Design2 */}
<div
className="parent relative flex flex-col justify-end p-3 cursor-pointer"
style={{
backgroundImage: `url(${blogFeaturedImage2})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{dateButton && (
<button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
1400/09/19
</button>
)}
{tagButton && (
<button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
تگ
</button>
)}
<div className="z-10 child-text">
<h2 className="text-white text-base font-sansbold leading-6">
آیا مواد غذایی پر فیبر مفید هستند؟
</h2>
{blogSubTitle && (
<h2 className="text-white text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید
</h2>
)}
</div>
<div className="z-10 flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className="flex items-center transition duration-200 transform hover:-translate-y-1">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-white font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="text-sm text-white font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={whiteCommentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
<div
style={{
zIndex: 0,
background:
"linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(2,0,36,0) 100%)",
}}
className="absolute right-0 bottom-0 h-full w-full"
></div>
</div>
</section>
);
};
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",
};

3
src/components/Blogs/design2/play-button.svg
Unescape View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="27.552" height="29.311" viewBox="0 0 27.552 29.311">
<path id="Vector" d="M0,14.659v-6C0,.919,5.472-2.2,12.16,1.648l5.188,3,5.188,3c6.688,3.851,6.688,10.174,0,14.024l-5.188,3-5.188,3C5.472,31.521,0,28.359,0,20.658Z" fill="#06bace"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 289 B

124
src/components/Blogs/design3/BlogDesign3.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 3
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design3
</span>
</p>
</div>
{/* blog UI Design3 */}
<div
className="flex flex-col justify-end relative p-3"
style={{
backgroundImage: `url(${blogFeaturedImage2})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
<h2
className={`text-base text-justify font-sansbold leading-6 ${blogTitleColor}`}
>
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogSubTitle && (
<h2
className={`text-base text-justify mt-2 font-sansbold leading-6 ${blogTitleColor}`}
>
نظر شما چیه
</h2>
)}
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p
className={`text-sm font-light mr-2 ${blogCommentAuthorTextColor}`}
>
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p
className={`text-sm font-light ml-2 ${blogCommentAuthorTextColor}`}
>
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

122
src/components/Blogs/design3/index.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 3
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design3
</span>
</p>
</div>
{/* blog UI Design3 */}
<div
className="flex flex-col justify-end relative p-3"
style={{
backgroundImage: `url(${blogFeaturedImage2})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
<h2
className={`text-base text-justify font-sansbold leading-6 ${blogTitleColor}`}
>
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogSubTitle && (
<h2
className={`text-base text-justify mt-2 font-sansbold leading-6 ${blogTitleColor}`}
>
نظر شما چیه
</h2>
)}
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p
className={`text-sm font-light mr-2 ${blogCommentAuthorTextColor}`}
>
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p
className={`text-sm font-light ml-2 ${blogCommentAuthorTextColor}`}
>
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

102
src/components/Blogs/design4/BlogDesign4.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-black bg-pink-200 p-2 rounded text-base">
طراحی بلاگ 4
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design4
</span>
</p>
</div>
{/* blog UI Design4 */}
<div className="flex items-strech justify-between relative p-2 rounded-xl border border-gray-300 ">
<div className="w-2/5 transform translate-x-1/3">
<img src={blogImage} alt="" className="w-full h-full " />
</div>
<div className="w-3/5 flex flex-col justify-between py-3 transform translate-x-10">
<div>
<h2 className="text-base text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-sm text-justify leading-6 text-grayTextColor mt-3">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
کند تا دیگران متوجه شوند.
</p>
)}
</div>
<div className=" flex item-center justify-between">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-sm text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

100
src/components/Blogs/design4/index.js
Unescape View File

@ -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 (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-black bg-pink-200 p-2 rounded text-base">
طراحی بلاگ 4
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design4
</span>
</p>
</div>
{/* blog UI Design4 */}
<div className="flex items-strech justify-between relative p-2 rounded-xl border border-gray-300 ">
<div className="w-2/5 transform translate-x-1/3">
<img src={blogImage} alt="" className="w-full h-full " />
</div>
<div className="w-3/5 flex flex-col justify-between py-3 transform translate-x-10">
<div>
<h2 className="text-base text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-sm text-justify leading-6 text-grayTextColor mt-3">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
کند تا دیگران متوجه شوند.
</p>
)}
</div>
<div className=" flex item-center justify-between">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-sm text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

102
src/components/Blogs/design5/BlogDesign5.js
Unescape View File

@ -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 (
<section className="w-5/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 5
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design5
</span>
</p>
</div>
{/* blog UI Design5 */}
<div className="flex items-strech justify-around p-4 rounded-md shadow-md bg-white">
<div className="w-2/5">
<img src={blogImage} alt="" className="w-full h-full" />
</div>
<div className="w-3/5 flex flex-col justify-between py-3 mr-4">
<div>
<h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm leading-6 text-grayTextColor mt-3 ">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
کند تا دیگران متوجه شوند.
</p>
)}
</div>
<div className="flex item-center justify-between w-full">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="text-sm text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

101
src/components/Blogs/design5/index.js
Unescape View File

@ -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 (
<section className="w-5/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 5
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design5
</span>
</p>
</div>
{/* blog UI Design5 */}
<div className="flex items-strech justify-around p-4 rounded-md shadow-md bg-white">
<div className="w-2/5">
<img src={blogImage} alt="" className="w-full h-full" />
</div>
<div className="w-3/5 flex flex-col justify-between py-3 mr-4">
<div>
<h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm leading-6 text-grayTextColor mt-3 ">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
کند تا دیگران متوجه شوند.
</p>
)}
</div>
<div className="flex item-center justify-between w-full">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="text-sm text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

100
src/components/Blogs/design6/BlogDesign6.js
Unescape View File

@ -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 (
<section className="w-5/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 6
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design6
</span>
</p>
</div>
{/* blog UI Design6 */}
<div className="">
<img src={FeaturedImage} alt="" className="w-full" />
<div className="py-2">
<h2 className="text-base text-justify text-grayTextColor mt-2 font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
)}
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-sm text-lightGrayTextColor ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

98
src/components/Blogs/design6/index.js
Unescape View File

@ -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 (
<section className="w-5/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
طراحی بلاگ 6
</h2>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design6
</span>
</p>
</div>
{/* blog UI Design6 */}
<div className="">
<img src={FeaturedImage} alt="" className="w-full" />
<div className="py-2">
<h2 className="text-base text-justify text-grayTextColor mt-2 font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
)}
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-8 h-8" />
<p className="text-sm text-lightGrayTextColor mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-sm text-lightGrayTextColor ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-7 h-7" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
</section>
);
};
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",
};

33
src/components/Blogs/index.js
Unescape View File

@ -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 : <Blog1 />,
2 : <Blog2 />,
3 : <Blog3 />,
4 : <Blog4 />,
5 : <Blog5 />,
6 : <Blog6 />
}
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col">
<select className="mb-10" onChange={(e) => setType(e.target.value)}>
{
Object.keys(list).map((option, index) => <option key={index}>{option}</option>)
}
</select>
{
list[type]
}
</div>
)
}
export default Blogs

8
src/components/Blogss/assets/article-featured-image.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 166 KiB

BIN
src/components/Blogss/assets/blog-author.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/components/Blogss/assets/blog-featured-image.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

BIN
src/components/Blogss/assets/blog-featured-image2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 120 KiB

11
src/components/Blogss/assets/light-gray-comment-icon copy.svg
Unescape View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

11
src/components/Blogss/assets/light-gray-comment-icon.svg
Unescape View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

11
src/components/Blogss/assets/white-comment-icon.svg
Unescape View File

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

Write Preview
Loading…
Cancel
Save