| After Width: | Height: | Size: 166 KiB | 
| After Width: | Height: | Size: 3.0 KiB | 
| After Width: | Height: | Size: 43 KiB | 
| After Width: | Height: | Size: 120 KiB | 
| After Width: | Height: | Size: 1.3 KiB | 
| After Width: | Height: | Size: 1.3 KiB | 
| After Width: | Height: | Size: 1.3 KiB | 
| @ -0,0 +1,83 @@ | |||||||
|  | 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-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,7 @@ | |||||||
|  | .child-text { | ||||||
|  |   transition: all 0.4s; | ||||||
|  | } | ||||||
|  | .parent:hover .child-text { | ||||||
|  |   transition: all 0.4s; | ||||||
|  |   transform: translateY(-7px) !important; | ||||||
|  | } | ||||||
| @ -0,0 +1,112 @@ | |||||||
|  | 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"> | ||||||
|  |       <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,107 @@ | |||||||
|  | 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"> | ||||||
|  |       <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,85 @@ | |||||||
|  | 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"> | ||||||
|  |       <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,86 @@ | |||||||
|  | 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"> | ||||||
|  |       <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,81 @@ | |||||||
|  | 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"> | ||||||
|  |       <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 bg-gray-100 py-3"> | ||||||
|  |       <select className="mb-4 w-20 mx-auto border bg-gray-300 p-2 rounded-md" onChange={(e) => setType(e.target.value)}> | ||||||
|  |         { | ||||||
|  |           Object.keys(list).map((option, index) => <option key={index}>{option}</option>) | ||||||
|  |         } | ||||||
|  |       </select> | ||||||
|  |       { | ||||||
|  |         list[type] | ||||||
|  |       } | ||||||
|  |     </div> | ||||||
|  |   ) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export default Blogs | ||||||