Add BlogPostCard component

README.md

@@ -172,3 +172,16 @@ Card that represents a credit card, a debit card, or other similar cards. Flips
 | cvv               | string         | CVV code displayed on the back of the card                                                                                                                       |
 
 ![Payment cards](http://i.imgur.com/0Nb9K1B.png)
+
+### Blog Post Card
+A card designed specifically for showcasing blog posts.
+
+| attribute | type        | description                                               |
+|-----------|-------------|-----------------------------------------------------------|
+| title     | string      | The title of the blog post                                |
+| excerpt   | string      | A short excerpt from the blog post                        |
+| author    | string      | The author of the blog post                               |
+| date      | string      | The date the blog post was published                      |
+| thumbnail | string      | URL to the thumbnail image for the blog post              |
+
+This card is perfect for displaying a brief overview of a blog post, including a captivating thumbnail, to entice readers to click through and read more.

src/BlogPostCard/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Card from '../Card';
+import styles from './styles.module.scss';
+
+type BlogPostCardProps = {
+  title: string;
+  excerpt: string;
+  author: string;
+  date: string;
+  thumbnail: string;
+};
+
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ title, excerpt, author, date, thumbnail }) => {
+  return (
+    <Card className={styles.blogPostCard}>
+      <div className={styles.thumbnail} style={{ backgroundImage: `url(${thumbnail})` }} />
+      <div className={styles.content}>
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.excerpt}>{excerpt}</p>
+        <div className={styles.meta}>
+          <span className={styles.author}>{author}</span>
+          <span className={styles.date}>{date}</span>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default BlogPostCard;

src/BlogPostCard/styles.module.scss

@@ -0,0 +1,45 @@
+.blogPostCard {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  overflow: hidden;
+
+  .thumbnail {
+    width: 100%;
+    height: 200px;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .content {
+    padding: 20px;
+
+    .title {
+      margin: 0;
+      padding-bottom: 10px;
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    .excerpt {
+      margin: 0;
+      padding-bottom: 20px;
+      font-size: 16px;
+      color: #666;
+    }
+
+    .meta {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: #999;
+
+      .author,
+      .date {
+        margin: 0;
+      }
+    }
+  }
+}

src/index.tsx

@@ -8,6 +8,7 @@ import PaymentCard from './PaymentCard';
 import RecipeCard from './RecipeCard';
 import NewsHeaderCard from './NewsHeaderCard';
 import CryptoCard from './CryptoCard';
+import BlogPostCard from './BlogPostCard';
 
 export {
   UserCard,
@@ -20,4 +21,5 @@ export {
   RecipeCard,
   NewsHeaderCard,
   CryptoCard,
+  BlogPostCard,
 };

src/stories/BlogPostCard.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import BlogPostCard from '../BlogPostCard';
+
+export default {
+  title: 'Cards/BlogPostCard',
+  component: BlogPostCard,
+} as Meta;
+
+const Template: Story = (args) => <BlogPostCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Exploring the Great Outdoors',
+  excerpt: 'Discover the beauty of nature through our detailed guide on outdoor adventures.',
+  author: 'Jane Doe',
+  date: 'August 20, 2021',
+  thumbnail: 'https://source.unsplash.com/random/800x600',
+};
+
+export const WithLongExcerpt = Template.bind({});
+WithLongExcerpt.args = {
+  ...Default.args,
+  excerpt: 'In this extensive guide, we dive deep into the heart of nature, exploring the vast and varied landscapes that our planet has to offer. From towering mountains to serene lakes, join us on a journey to discover the beauty and majesty of the great outdoors.',
+};
+
+export const WithCustomThumbnail = Template.bind({});
+WithCustomThumbnail.args = {
+  ...Default.args,
+  thumbnail: 'https://source.unsplash.com/featured/?nature,water',
+};