|
|
|
|
@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg"; |
|
|
|
|
|
|
|
|
|
const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => { |
|
|
|
|
return ( |
|
|
|
|
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
|
|
|
|
<section className="w-4/12 mx-auto p-4 bg-gray-200 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,37 +23,37 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => { |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
{/* blog UI Design5 */} |
|
|
|
|
<div className="w-full md:w-2/5 flex items-center justify-around p-6 rounded-md shadow-md "> |
|
|
|
|
<div className="flex items-center justify-around p-6 rounded-md shadow-md bg-white"> |
|
|
|
|
<div className="w-4/12"> |
|
|
|
|
<img src={blogImage} alt="" className="w-full" /> |
|
|
|
|
</div> |
|
|
|
|
<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> |
|
|
|
|
{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"> |
|
|
|
|
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد |
|
|
|
|
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا |
|
|
|
|
دیگران متوجه شوند. |
|
|
|
|
</p> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
<div className="flex items-center"> |
|
|
|
|
<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"> |
|
|
|
|
<div className="flex items-center"> |
|
|
|
|
<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> |
|
|
|
|
|
