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.

69 lines
2.4 KiB

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="" />
<span class="w-6 h-6 text-center flex flex-col items-center justify-center font-sansbold absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-[10px] bg-[#818181] text-white border-2 border-white dark:border-gray-800 rounded-full">
{commentNum}
</span>
</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",
};