| 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 | ||||