master
mahdi 3 years ago
parent 14522ea8b8
commit d1fa38f047
  1. 10
      src/App.js
  2. 4
      src/components/Blogs/design1/BlogDesign1.js
  3. 49
      src/components/Blogs/design2/BlogDesign2.js
  4. 33
      src/components/Blogs/design3/BlogDesign3.js

@ -19,12 +19,12 @@ function App() {
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
{/* <ProductTags /> */} {/* <ProductTags /> */}
{/* <CounterDesign /> */} {/* <CounterDesign /> */}
{/* <BlogDesign1 /> */} <BlogDesign1 />
<BlogDesign2 /> <BlogDesign2 />
{/* <BlogDesign3 /> */} <BlogDesign3 />
{/* <BlogDesign4 /> */} <BlogDesign4 />
{/* <BlogDesign5 /> */} <BlogDesign5 />
{/* <BlogDesign6 /> */} <BlogDesign6 />
</div> </div>
); );
} }

@ -41,7 +41,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
<div className=" flex item-center justify-between mt-5"> <div className=" flex item-center justify-between mt-5">
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className=" flex items-center">
<img src={blogAuthorImg} alt="" /> <img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor mr-2 font-light"> <p className="text-xs text-lightGrayTextColor mr-2 font-light">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
@ -52,7 +52,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
<p className="text-xs text-lightGrayTextColor ml-2 font-light"> <p className="text-xs text-lightGrayTextColor ml-2 font-light">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={commentIcon} alt="" /> <img src={commentIcon} alt="" className="w-7 h-7" />
</div> </div>
)} )}
</div> </div>

@ -5,7 +5,13 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg"; import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => { const BlogDesign2 = ({
blogSubTitle,
dateButton,
tagButton,
blogAuthor,
blogComments,
}) => {
return ( return (
<section className="w-3/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-3/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
@ -44,32 +50,31 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
تگ تگ
</button> </button>
)} )}
{/* <img src={blogFeaturedImage2} alt="" className="w-full" /> */}
<div className="z-10"> <div className="z-10">
<h2 className="text-white text-base"> <h2 className="text-white text-base">
آیا مواد غذایی پر فیبر مفید هستند؟ آیا مواد غذایی پر فیبر مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 className="text-white text-base">شما چه فکری می کنید</h2> <h2 className="text-white text-base mt-2">شما چه فکری می کنید</h2>
)} )}
</div> </div>
<div className="z-10 flex item-center justify-between w-full mt-4"> <div className="z-10 flex item-center justify-between w-full mt-4">
{/* {blogAuthor && ( */} {blogAuthor && (
<div className="flex items-center"> <div className="flex items-center">
<img src={blogAuthorImg} alt="" className="w-7 h-7" /> <img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-white font-light mr-2"> <p className="text-xs text-white font-light mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
{/* // )} */} )}
{/* {blogComments && ( */} {blogComments && (
<div className="flex items-center"> <div className="flex items-center">
<p className="text-xs text-white font-light ml-2"> <p className="text-xs text-white font-light ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={whiteCommentIcon} alt="" className="w-7 h-7" /> <img src={whiteCommentIcon} alt="" className="w-7 h-7" />
</div> </div>
{/* // )} */} )}
</div> </div>
<div <div
style={{ style={{
@ -88,6 +93,8 @@ export default BlogDesign2;
BlogDesign2.defaultProps = { BlogDesign2.defaultProps = {
blogSubTitle: true, blogSubTitle: true,
dateButton: false, dateButton: true,
tagButton: true, tagButton: false,
blogAuthor: true,
blogComments: true,
}; };

@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => { const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
return ( return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-3/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base"> <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@ -23,33 +23,42 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
</p> </p>
</div> </div>
{/* blog UI Design3 */} {/* blog UI Design3 */}
<div className="w-full md:w-1/4 relative"> <div
<img src={blogFeaturedImage2} alt="" /> className="flex flex-col justify-end relative p-3"
<div className="w-11/12 m-auto p-2 rounded-lg shadow-md bg-white absolute -bottom-16 right-4 "> style={{
<h2 className="text-base md:text-xl text-justify text-productTitle"> 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 text-productTitle ">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 className="text-base md:text-xl text-justify text-productTitle mt-2"> <h2 className="text-base text-justify text-productTitle mt-2">
نظر شما چیه نظر شما چیه
</h2> </h2>
)} )}
<div className="flex item-center justify-between w-full mt-4">
<div className=" flex item-center justify-between mt-5">
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className=" flex items-center">
<img src={blogAuthorImg} alt="" /> <img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-lightGrayTextColor mr-2"> <p className="text-xs text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب حامد دژبانی نسب
</p> </p>
</div> </div>
)} )}
{blogComments && ( {blogComments && (
<div className=" flex items-center"> <div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2"> <p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={commentIcon} alt="" /> <img src={commentIcon} alt="" className="w-7 h-7" />
</div> </div>
)} )}
</div> </div>

Loading…
Cancel
Save