feat(RecipeCard): añadida funcionalidad para ver datos de una receta

src/components/RecipeCard.vue

@@ -3,38 +3,60 @@
         <div class="row g-0 h-100">
         <div class="row g-0 h-100">
             <div class="col-md-5 d-flex align-items-stretch">
             <div class="col-md-5 d-flex align-items-stretch">
                 <img 
                 <img 
-                src="/src/assets/default-recipe.jpg"
+                :src="recipe.picture != null ? recipe.picture : 'src/assets/default-recipe.jpg'"
                 class="img-fluid w-100 h-100 rounded-start"
                 class="img-fluid w-100 h-100 rounded-start"
                 style="object-fit: cover;"
                 style="object-fit: cover;"
-                alt="Imagen receta"
+                :alt="'Imagen de ' + recipe.name "
                 >
                 >
             </div>
             </div>
             <div class="col-md-7 d-flex flex-column">
             <div class="col-md-7 d-flex flex-column">
                 <div class="card-body flex-grow-1 d-flex flex-column">
                 <div class="card-body flex-grow-1 d-flex flex-column">
                     <div class="text-start">
                     <div class="text-start">
-                        <h5 class="fw-bolder mb-2">Nombre de la receta</h5>
-                        <div class="d-flex small text-warning mb-2">
-                            <div class="bi-star-fill me-1"></div>
-                            <div class="bi-star-fill me-1"></div>
-                            <div class="bi-star-fill me-1"></div>
-                            <div class="bi-star-fill me-1"></div>
-                            <div class="bi-star-fill"></div>
-                        </div>
+                        <h5 class="fw-bolder mb-3">{{ recipe.name }}</h5>
                         <p class="fs-8">
                         <p class="fs-8">
-                            Auto-layout for flexbox grid columns also means you can set the width of one
-                            column and have the sibling columns automatically resize around it. You may use predefined grid classes.
+                            {{ recipe.description }}
                         </p>
                         </p>
                     </div>
                     </div>
                 </div>
                 </div>
                 <div class="card-footer border-top-0 bg-transparent">
                 <div class="card-footer border-top-0 bg-transparent">
                     <a class="btn btn-more mt-auto me-2" href="/recipes/detail">Ver completa</a>
                     <a class="btn btn-more mt-auto me-2" href="/recipes/detail">Ver completa</a>
-                    <a class="btn btn-more mt-auto" title="Añadir a favoritos" href="#"><i class="bi bi-star"></i></a>
+                    <button class="btn btn-more mt-auto" 
+                            :title="recipe.favorite ? 'Eliminar de favoritos' : 'Añadir a favoritos'"
+                            @click="toggleFavorite">
+                        <i :class="recipe.favorite ? 'bi-star-fill' : 'bi-star'"></i>
+                    </button>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
 </template>
 </template>
 
 
+<script setup>
+import { useRecipeStore } from '@/stores/recipeStore';
+
+const props = defineProps({
+    recipe: {
+        type: Object,
+        required: true
+    }
+});
+
+const recipeStore = useRecipeStore();
+
+const toggleFavorite = async() => {
+    try {
+        if (props.recipe.favorite) {
+            await recipeStore.removeFavorite(props.recipe.id);
+        } else {
+            await recipeStore.madeFavorite(props.recipe.id);
+        }
+        props.recipe.favorite = !props.recipe.favorite;
+    } catch (error) {
+        console.error('Error al actualizar el estado de favorito', error);
+    }
+};
+</script>
+
 <style scoped>
 <style scoped>
 .card-custom {
 .card-custom {
     border-color: #793E6C;
     border-color: #793E6C;