You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.4 KiB
72 lines
2.4 KiB
import RelativeCircle from "../../RelativeCircle"; |
|
|
|
const BlogDesign1 = ({ |
|
blogTitle, |
|
blogExcerpt, |
|
blogAuthor, |
|
blogComments, |
|
commentNum, |
|
featuredImage, |
|
commentIcon, |
|
}) => { |
|
return ( |
|
<div className="w-fit flex items-strech justify-around p-4 bg-white"> |
|
<img src={featuredImage} alt="blogImage" className="shrink" /> |
|
<div className="flex-1 flex flex-col justify-between mr-4 py-2"> |
|
<div className="flex flex-col"> |
|
{blogTitle && ( |
|
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6"> |
|
{blogTitle} |
|
</h2> |
|
)} |
|
{blogExcerpt && ( |
|
<p className="mt-4 text-justify text-sm text-[#646464] leading-6"> |
|
{blogExcerpt} |
|
</p> |
|
)} |
|
</div> |
|
<div className="w-full flex item-center justify-between mt-2"> |
|
{blogAuthor && ( |
|
<div className="flex items-center"> |
|
<img src="images/blog-author.png" alt="author" className="w-8" /> |
|
<p className="text-sm text-[#818181] mr-2 font-light"> |
|
{blogAuthor} |
|
</p> |
|
</div> |
|
)} |
|
{blogComments && ( |
|
<div className="flex items-center"> |
|
<p className="text-sm text-[#818181] ml-2 font-light"> |
|
{blogComments} |
|
</p> |
|
<div class="relative"> |
|
<img class="w-7 rounded-full" src={commentIcon} alt="" /> |
|
<RelativeCircle |
|
className={ |
|
"font-sansbold absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-[10px] bg-[#818181] text-white " |
|
} |
|
/> |
|
</div> |
|
</div> |
|
)} |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
}; |
|
|
|
export default BlogDesign1; |
|
|
|
BlogDesign1.defaultProps = { |
|
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`, |
|
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد |
|
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا |
|
دیگران متوجه شوند. |
|
`, |
|
blogAuthor: `حامد دژبانی نسب`, |
|
blogComments: `زمان مطالعه 30 دقیقه`, |
|
commentNum: `26`, |
|
|
|
featuredImage: "images/blog-featured-image.jpg", |
|
commentIcon: "images/light-gray-comment-icon.svg", |
|
};
|
|
|