From 0720687e3cff4fdee703a9b0608587ed4acb87f8 Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:17:37 +0200
Subject: [PATCH] Add BlogPostCard component

---
 README.md                            | 13 ++++++++
 src/BlogPostCard/index.tsx           | 29 ++++++++++++++++++
 src/BlogPostCard/styles.module.scss  | 45 ++++++++++++++++++++++++++++
 src/index.tsx                        |  2 ++
 src/stories/BlogPostCard.stories.tsx | 31 +++++++++++++++++++
 5 files changed, 120 insertions(+)
 create mode 100644 src/BlogPostCard/index.tsx
 create mode 100644 src/BlogPostCard/styles.module.scss
 create mode 100644 src/stories/BlogPostCard.stories.tsx

diff --git a/README.md b/README.md
index e74d0cb..14683ab 100644
--- a/README.md
+++ b/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.
diff --git a/src/BlogPostCard/index.tsx b/src/BlogPostCard/index.tsx
new file mode 100644
index 0000000..0c94e75
--- /dev/null
+++ b/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;
diff --git a/src/BlogPostCard/styles.module.scss b/src/BlogPostCard/styles.module.scss
new file mode 100644
index 0000000..5af1bfd
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 1ca3e06..0c79b9c 100644
--- a/src/index.tsx
+++ b/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,
 };
diff --git a/src/stories/BlogPostCard.stories.tsx b/src/stories/BlogPostCard.stories.tsx
new file mode 100644
index 0000000..206a7fc
--- /dev/null
+++ b/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',
+};