From 86a7471656be56d1c8e640ed5e9bb3c478a28aac Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Tue, 30 Jul 2024 21:13:08 -0500
Subject: [PATCH] Added alt and title to RecipeCard image.

---
 src/components/recipe-card/RecipeCard.tsx | 4 +++-
 src/pages/recipes/Recipes.tsx             | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/recipe-card/RecipeCard.tsx b/src/components/recipe-card/RecipeCard.tsx
index 8e95277..39bccb0 100644
--- a/src/components/recipe-card/RecipeCard.tsx
+++ b/src/components/recipe-card/RecipeCard.tsx
@@ -4,6 +4,7 @@ export interface RecipeCardProps {
     title: string
     ownerUsername: string
     mainImageUrl: string
+    mainImageAlt?: string
     starCount: number
     isPublic: boolean
 }
@@ -12,12 +13,13 @@ const RecipeCard = ({
     title,
     ownerUsername,
     mainImageUrl,
+    mainImageAlt,
     starCount,
     isPublic
 }: RecipeCardProps) => {
     return (
         <article>
-            <img src={mainImageUrl} />
+            <img src={mainImageUrl} alt={mainImageAlt} title={mainImageAlt} />
             <div className="title-star-count-container">
                 <h1>{title}</h1>
                 <span>
diff --git a/src/pages/recipes/Recipes.tsx b/src/pages/recipes/Recipes.tsx
index 2ac2326..0f776ba 100644
--- a/src/pages/recipes/Recipes.tsx
+++ b/src/pages/recipes/Recipes.tsx
@@ -35,6 +35,9 @@ const Recipes = () => {
                 title={view.title}
                 ownerUsername={view.ownerUsername}
                 mainImageUrl={view.mainImage.url}
+                mainImageAlt={
+                    view.mainImage.alt ? view.mainImage.alt : undefined
+                }
                 starCount={view.starCount}
                 isPublic={view.isPublic}
             />