Add BlogPostCard component

README.md

@@ -172,3 +172,28 @@ 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 specifically designed for showcasing blog posts with a clean and engaging layout.
+
+| attribute | type        | description                                               |
+|-----------|-------------|-----------------------------------------------------------|
+| href      | string/null | optional url the card will link to when clicked           |
+| thumbnail | string      | url to the image that will be displayed in the background |
+| title     | string      | title of the blog post                                    |
+| excerpt   | string      | a short excerpt from the blog post                        |
+| author    | string      | author of the blog post                                   |
+| date      | string      | date of publishing                                        |
+
+```typescript
+import { BlogPostCard } from 'react-ui-cards';
+
+export const Example = () => <BlogPostCard
+    href='https://example.com/blog-post'
+    thumbnail='https://example.com/thumbnail.jpg'
+    title='The Ultimate Guide to Blogging'
+    excerpt='Discover the secrets to successful blogging in this comprehensive guide...'
+    author='Jane Doe'
+    date='Jan 1, 2022'
+/>
+```

src/BlogPostCard/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './styles.module.scss';
+
+export type BlogPostCardProps = {
+  href: string;
+  thumbnail: string;
+  title: string;
+  excerpt: string;
+  author: string;
+  date: string;
+};
+
+const BlogPostCard: React.FC<BlogPostCardProps> = ({
+  href,
+  thumbnail,
+  title,
+  excerpt,
+  author,
+  date,
+}) => (
+  <a href={href} 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>
+  </a>
+);
+
+export default BlogPostCard;

src/BlogPostCard/styles.module.scss

@@ -0,0 +1,49 @@
+.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;
+  text-decoration: none;
+  color: inherit;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 200px;
+  background-size: cover;
+  background-position: center;
+}
+
+.content {
+  padding: 20px;
+}
+
+.title {
+  margin: 0;
+  margin-bottom: 10px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.excerpt {
+  margin: 0;
+  margin-bottom: 20px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.author {
+  font-style: italic;
+}
+
+.date {
+  text-align: right;
+}

src/__tests__/BlogPostCard.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import BlogPostCard from '../BlogPostCard';
+
+describe('BlogPostCard', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<BlogPostCard
+        href="https://example.com/blog-post"
+        thumbnail="https://example.com/thumbnail.jpg"
+        title="The Ultimate Guide to Blogging"
+        excerpt="Discover the secrets to successful blogging in this comprehensive guide..."
+        author="Jane Doe"
+        date="Jan 1, 2022"
+      />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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,26 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import BlogPostCard, { BlogPostCardProps } from '../BlogPostCard';
+
+export default {
+  title: 'Cards/BlogPostCard',
+  component: BlogPostCard,
+} as Meta;
+
+const Template: Story<BlogPostCardProps> = (args) => <BlogPostCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  href: 'https://example.com/blog-post',
+  thumbnail: 'https://source.unsplash.com/random/800x600',
+  title: 'The Ultimate Guide to Blogging',
+  excerpt: 'Discover the secrets to successful blogging in this comprehensive guide...',
+  author: 'Jane Doe',
+  date: 'Jan 1, 2022',
+};
+
+export const WithCustomThumbnail = Template.bind({});
+WithCustomThumbnail.args = {
+  ...Default.args,
+  thumbnail: 'https://source.unsplash.com/user/erondu/800x600',
+};