reza added something

master
Reza_ashrafi 3 years ago
parent cafbf0cdc3
commit 310bc32c11
  1. 8
      src/components/Blogs/assets/article-featured-image.svg
  2. BIN
      src/components/Blogs/assets/blog-author.png
  3. BIN
      src/components/Blogs/assets/blog-featured-image.jpg
  4. BIN
      src/components/Blogs/assets/blog-featured-image2.jpg
  5. 11
      src/components/Blogs/assets/light-gray-comment-icon copy.svg
  6. 11
      src/components/Blogs/assets/light-gray-comment-icon.svg
  7. 11
      src/components/Blogs/assets/white-comment-icon.svg
  8. 97
      src/components/Blogs/design1/index.js
  9. 127
      src/components/Blogs/design2/index.js
  10. 122
      src/components/Blogs/design3/index.js
  11. 100
      src/components/Blogs/design4/index.js
  12. 101
      src/components/Blogs/design5/index.js
  13. 98
      src/components/Blogs/design6/index.js
  14. 33
      src/components/Blogs/index.js
  15. 6
      src/components/Feedback/card-remove.svg
  16. 3
      src/components/Feedback/gray-upward-icon.svg
  17. 8
      src/components/Feedback/heart-emoji.svg
  18. 3
      src/components/Feedback/sad-emoji.svg
  19. 8
      src/components/Feedback/smile-emoji.svg
  20. 3
      src/components/Feedback/speechless-emoji.svg
  21. 8
      src/components/Feedback/suspicious-emoji.svg
  22. 8701
      yarn.lock

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

@ -0,0 +1,11 @@
<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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,11 @@
<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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,11 @@
<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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,97 @@
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-bold 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",
};

@ -0,0 +1,127 @@
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-bold leading-6">
آیا مواد غذایی پر فیبر مفید هستند؟
</h2>
{blogSubTitle && (
<h2 className="text-white text-base mt-2 font-bold 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",
};

@ -0,0 +1,122 @@
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-bold leading-6 ${blogTitleColor}`}
>
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogSubTitle && (
<h2
className={`text-base text-justify mt-2 font-bold 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",
};

@ -0,0 +1,100 @@
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-bold 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",
};

@ -0,0 +1,101 @@
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-bold 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",
};

@ -0,0 +1,98 @@
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-bold 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",
};

@ -0,0 +1,33 @@
import React, {useState} from 'react';
import Blog1 from './design1';
import Blog2 from './design2';
import Blog3 from './design3';
import Blog4 from './design4';
import Blog5 from './design5';
import Blog6 from './design6';
function Blogs() {
const list = {
1 : <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

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="45.19" height="45.19" viewBox="0 0 45.19 45.19">
<g id="card-remove" transform="translate(8.485 8.485)">
<path id="Vector" d="M0,28.219,28.219,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="12"/>
<path id="Vector-2" data-name="Vector" d="M28.219,28.219,0,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="12"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 417 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="53" viewBox="0 0 70 53">
<path id="Polygon_1" data-name="Polygon 1" d="M35,0,70,53H0Z" fill="#efefef"/>
</svg>

After

Width:  |  Height:  |  Size: 172 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 29 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 28 KiB

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save