master
mahdi 3 years ago
parent d2c9ca38b8
commit 14522ea8b8
  1. 10
      src/App.js
  2. 10
      src/components/Blogs/design1/BlogDesign1.js
  3. 36
      src/components/Blogs/design2/BlogDesign2.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>
); );
} }

@ -23,16 +23,16 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
</p> </p>
</div> </div>
{/* blog UI Design1 */} {/* blog UI Design1 */}
<div className="w-full md:w-2/5 bg-red-400 flex items-center justify-around py-2 px-4"> <div className="w-full md:w-2/5 flex items-center justify-around py-2 px-4">
<div className="w-4/12"> <div className="w-4/12">
<img src={blogImage} alt="" className="w-full" /> <img src={blogImage} alt="" className="w-full" />
</div> </div>
<div className="w-8/12 mr-4"> <div className="w-8/12 mr-4">
<h2 className="text-base md:text-xl text-justify text-grayTextColor"> <h2 className="text-base text-justify text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟ آیا مواد غذای پر فیبر و مفید هستند؟
</h2> </h2>
{blogExcerpt && ( {blogExcerpt && (
<p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor"> <p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند. دیگران متوجه شوند.
@ -42,14 +42,14 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
{blogAuthor && ( {blogAuthor && (
<div className=" flex items-center"> <div className=" flex items-center">
<img src={blogAuthorImg} alt="" /> <img src={blogAuthorImg} alt="" />
<p className="text-xs text-lightGrayTextColor mr-2"> <p className="text-xs text-lightGrayTextColor mr-2 font-light">
حامد دژبانی نسب حامد دژبانی نسب
</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 ml-2 font-light">
زمان مطالعه 30 دقیقه زمان مطالعه 30 دقیقه
</p> </p>
<img src={commentIcon} alt="" /> <img src={commentIcon} alt="" />

@ -7,7 +7,7 @@ import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => { const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
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-green-100 p-2 rounded text-base"> <h2 className="text-productTitle bg-green-100 p-2 rounded text-base">
@ -23,7 +23,17 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
</p> </p>
</div> </div>
{/* blog UI Design2 */} {/* blog UI Design2 */}
<div className="relative w-full md:w-1/4"> <div
className="relative flex flex-col justify-end p-3"
style={{
backgroundImage: `url(${blogFeaturedImage2})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{dateButton && ( {dateButton && (
<button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4"> <button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
1400/09/19 1400/09/19
@ -34,26 +44,30 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
تگ تگ
</button> </button>
)} )}
<img src={blogFeaturedImage2} alt="" className="w-full" /> {/* <img src={blogFeaturedImage2} alt="" className="w-full" /> */}
<div className="absolute right-2 bottom-16 z-10"> <div className="z-10">
<h2 className="text-white text-lg"> <h2 className="text-white text-base">
آیا مواد غذایی پر فیبر مفید هستند؟ آیا مواد غذایی پر فیبر مفید هستند؟
</h2> </h2>
{blogSubTitle && ( {blogSubTitle && (
<h2 className="text-white text-lg">شما چه فکری می کنید</h2> <h2 className="text-white text-base">شما چه فکری می کنید</h2>
)} )}
</div> </div>
<div className="z-10 flex item-center justify-around absolute right-2 bottom-1 w-full"> <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="" /> <img src={blogAuthorImg} alt="" className="w-7 h-7" />
<p className="text-xs text-white mr-2">حامد دژبانی نسب</p> <p className="text-xs text-white font-light mr-2">
حامد دژبانی نسب
</p>
</div> </div>
{/* // )} */} {/* // )} */}
{/* {blogComments && ( */} {/* {blogComments && ( */}
<div className="flex items-center"> <div className="flex items-center">
<p className="text-xs text-white ml-2">زمان مطالعه 30 دقیقه</p> <p className="text-xs text-white font-light ml-2">
<img src={whiteCommentIcon} alt="" /> زمان مطالعه 30 دقیقه
</p>
<img src={whiteCommentIcon} alt="" className="w-7 h-7" />
</div> </div>
{/* // )} */} {/* // )} */}
</div> </div>

Loading…
Cancel
Save