|
|
|
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",
|
|
|
|
};
|