medio funcionalidad ver detalle de receta

src/views/RecipeDetail.vue

 <template>
-    <div class="container my-5">
+    <div class="container my-5" v-if="recipe">
         <div class="row justify-content-center">
             <div class="col-lg-10 col-md-11">
                 <div class="card h-100 card-custom">
@@ -27,15 +27,16 @@
                             <h2 v-if="mode === 'view'" class="fw-bolder mb-2 text-primary-custom">{{ recipe.name }}</h2>
                             <input v-else type="text" v-model="recipe.name" class="form-control form-control-lg text-center mb-2" />
                             
-                            <div class="d-flex small text-warning mb-4 justify-content-center">
-                                <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 class="d-flex justify-content-center align-items-center flex-wrap gap-3 mb-4">
+                                <p v-if="mode === 'view'" class="text-muted small mb-0">
+                                    Creado el **{{ formattedDate }}**
+                                </p>
+                                <button class="btn btn-sm" >
+                                    <i :class="recipe.favorite ? 'bi-star-fill' : 'bi-star'"></i>
+                                </button>
                             </div>
-                            
-                            <div class="mb-4">
+
+                            <div class="mb-4 mt-3">
                                 <img v-if="mode === 'view'"
                                      :src="recipe.image"
                                      class="img-fluid rounded shadow-sm"
@@ -116,29 +117,52 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { useRecipeStore } from '@/stores/recipeStore';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
 
 // Estado de la vista: 'view' o 'edit'
 const mode = ref('view');
 
-// Datos de la receta de ejemplo
-const recipe = ref({
-    name: 'Tarta de Manzana Clásica',
-    image: '/src/assets/default-recipe.jpg',
-    description: 'Una deliciosa tarta de manzana con un toque de canela y una corteza dorada y crujiente.',
-    ingredients: [
-        { quantity: 2, unit: 'tazas', ingredient: 'harina de trigo' },
-        { quantity: 1, unit: 'taza', ingredient: 'azúcar' },
-        { quantity: 4, unit: 'unidades', ingredient: 'manzanas' }
-    ],
-    steps: [
-        { description: 'Precalentar el horno a 180°C.' },
-        { description: 'Mezclar la harina y el azúcar en un bol.' },
-        { description: 'Pelar y cortar las manzanas en rodajas finas.' },
-        { description: 'Hornear por 45 minutos.' }
-    ]
+const recipeStore = useRecipeStore();
+const route = useRoute();
+
+// Usa una propiedad computada para acceder al estado reactivo del store
+const recipe = computed(() => recipeStore.recipe);
+
+onMounted(async () => {
+    // Corregir la forma de acceder al ID de la ruta
+    const recipeId = route.params.id;
+    await recipeStore.readDetail(recipeId);
+});
+
+// Formatear la fecha para una visualización profesional
+const formattedDate = computed(() => {
+    if (recipe.value && recipe.value.createdAt) {
+        const options = { year: 'numeric', month: 'long', day: 'numeric' };
+        return new Date(recipe.value.createdAt).toLocaleDateString('es-ES', options);
+    }
+    return 'Fecha no disponible';
 });
 
+// Datos de la receta de ejemplo
+// const recipe = ref({
+//     name: 'Tarta de Manzana Clásica',
+//     image: '/src/assets/default-recipe.jpg',
+//     description: 'Una deliciosa tarta de manzana con un toque de canela y una corteza dorada y crujiente.',
+//     ingredients: [
+//         { quantity: 2, unit: 'tazas', ingredient: 'harina de trigo' },
+//         { quantity: 1, unit: 'taza', ingredient: 'azúcar' },
+//         { quantity: 4, unit: 'unidades', ingredient: 'manzanas' }
+//     ],
+//     steps: [
+//         { description: 'Precalentar el horno a 180°C.' },
+//         { description: 'Mezclar la harina y el azúcar en un bol.' },
+//         { description: 'Pelar y cortar las manzanas en rodajas finas.' },
+//         { description: 'Hornear por 45 minutos.' }
+//     ]
+// });
+
 
 // Función para el textarea
 const autoGrow = (event) => {