From c7f9a83cca8b6cb99a733cabc06cd25a6d97f2da Mon Sep 17 00:00:00 2001
From: JesseBrault0709 <62299747+JesseBrault0709@users.noreply.github.com>
Date: Mon, 24 Jun 2024 17:02:55 +0200
Subject: [PATCH] Basic recipe card structure.

---
 src/components/recipe-card/RecipeCard.tsx     | 23 +++++++++++++++++++
 src/stories/recipe-card/RecipeCard.stories.ts | 20 ++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/components/recipe-card/RecipeCard.tsx
 create mode 100644 src/stories/recipe-card/RecipeCard.stories.ts

diff --git a/src/components/recipe-card/RecipeCard.tsx b/src/components/recipe-card/RecipeCard.tsx
new file mode 100644
index 0000000..c37f342
--- /dev/null
+++ b/src/components/recipe-card/RecipeCard.tsx
@@ -0,0 +1,23 @@
+export interface RecipeCardProps {
+    title: string
+    owner?: string
+    imgUrl?: string
+    rating?: number
+}
+
+const RecipeCard = ({ title, owner, imgUrl, rating }: RecipeCardProps) => {
+    return (
+        <article>
+            {imgUrl ? <img src={imgUrl} /> : null}
+            <div className="title-rating-container">
+                <h1>{title}</h1>
+                {rating ? <span>{Math.round(rating)}/5</span> : null}
+            </div>
+            <div className="owner-container">
+                {owner ? <p>@{owner}</p> : null}
+            </div>
+        </article>
+    )
+}
+
+export default RecipeCard
diff --git a/src/stories/recipe-card/RecipeCard.stories.ts b/src/stories/recipe-card/RecipeCard.stories.ts
new file mode 100644
index 0000000..e1bb6db
--- /dev/null
+++ b/src/stories/recipe-card/RecipeCard.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import RecipeCard from '../../components/recipe-card/RecipeCard'
+
+const meta = {
+    title: 'RecipeCard',
+    component: RecipeCard
+} satisfies Meta<typeof RecipeCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+    args: {
+        title: 'My Recipe',
+        owner: 'JesseBrault',
+        rating: 5,
+        imgUrl: 'https://www.simplyrecipes.com/thmb/L4nBpdZCubnbGtVbOW90JQSBVWc=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/Simply-Recipes-Easy-Banana-Bread-LEAD-2-2-63dd39af009945d58f5bf4c2ae8d6070.jpg'
+    }
+}