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 /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
<BlogDesign1 />
<BlogDesign2 />
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />
</div>
);
}

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

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

Loading…
Cancel
Save