feat(Recipes): añadida funcionalidad para ver las recetas de un usuario con paginación y ordenación

src/views/Recipes.vue

-<script setup>
-import RecipeCard from '@/components/RecipeCard.vue';
-</script>
-
 <template>
     <section class="bg-custom py-5 flex-grow-1">
-        <div class="container px-4 px-lg-5 mt-5">
-            <div class="d-flex flex-wrap gap-3 justify-content-center">
-                <RecipeCard></RecipeCard>  
-                <RecipeCard></RecipeCard>
-                <RecipeCard></RecipeCard>
-                <RecipeCard></RecipeCard>              
+        <div class="container px-4 px-lg-5 mt-1">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+                <div>
+                    <label>
+                        Mostrar
+                        <select v-model.number="recipeStore.pageSize" class="form-select form-select-sm d-inline-block w-auto mx-1">
+                            <option value="6">6</option>
+                            <option value="10">10</option>
+                            <option value="14">14</option>
+                        </select>
+                        recetas
+                    </label>
+                </div>
+                <div class="d-flex align-items-center">
+                    <span class="me-2 fw-bold">Ordenar por:</span>
+                    <button class="btn btn-outline-secondary btn-sm me-2" 
+                            :class="{ 'active': recipeStore.sortDirection === 'desc' }"
+                            @click="recipeStore.readAll(0, recipeStore.pageSize, 'desc')">
+                        Más recientes
+                    </button>
+                    <button class="btn btn-outline-secondary btn-sm" 
+                            :class="{ 'active': recipeStore.sortDirection === 'asc' }"
+                            @click="recipeStore.readAll(0, recipeStore.pageSize, 'asc')">
+                        Más antiguas
+                    </button>
+                </div>
+            </div>
+
+            <div v-if="recipeStore.recipes.length" class="d-flex flex-wrap gap-3 justify-content-center">
+                <RecipeCard v-for="recipe in recipeStore.recipes" :key="recipe.id" :recipe="recipe"></RecipeCard>
+            </div>
+            <div v-else class="text-center text-muted">
+                No se encontraron recetas.
+            </div>
+
+            <div class="d-flex justify-content-center mt-4">
+                <nav aria-label="Page navigation">
+                    <ul class="pagination pagination-sm mb-0 pagination-custom">
+                        <li class="page-item" :class="{ disabled: recipeStore.currentPage === 0 }">
+                            <button class="page-link" @click="goToPage(recipeStore.currentPage - 1)">Anterior</button>
+                        </li>
+                        <li class="page-item" v-for="page in recipeStore.totalPages" :key="page" :class="{ active: page - 1 === recipeStore.currentPage }">
+                            <button class="page-link" @click="goToPage(page - 1)">{{ page }}</button>
+                        </li>
+                        <li class="page-item" :class="{ disabled: recipeStore.currentPage === recipeStore.totalPages - 1 }">
+                            <button class="page-link" @click="goToPage(recipeStore.currentPage + 1)">Siguiente</button>
+                        </li>
+                    </ul>
+                </nav>
             </div>
         </div>
     </section>
 </template>
 
+<script setup>
+import RecipeCard from '@/components/RecipeCard.vue';
+import { useRecipeStore } from '@/stores/recipeStore';
+import { onMounted, watch } from 'vue';
+
+const recipeStore = useRecipeStore();
+
+onMounted(() => {
+    recipeStore.readAll(0, recipeStore.pageSize, recipeStore.sortDirection);
+});
+
+watch(() => recipeStore.pageSize, (newSize) => {
+    recipeStore.readAll(0, newSize, recipeStore.sortDirection);
+});
+
+const goToPage = (page) => {
+    recipeStore.readAll(page, recipeStore.pageSize, recipeStore.sortDirection);
+};
+</script>
+
 <style scoped>
 .bg-custom {
     background-color: #f4f6f5;
     height: calc(100% - 40px);
 }
+
+/* Estilos para la paginación */
+.pagination-custom .page-item .page-link {
+    border-radius: 5px;
+    margin: 0 2px;
+    border-color: #ccc;
+    color: #333;
+    font-weight: bold;
+}
+
+.pagination-custom .page-item.active .page-link {
+    background-color: #793E6C;
+    border-color: #793E6C;
+    color: white;
+}
+
+.pagination-custom .page-item.disabled .page-link {
+    color: #bbb;
+}
+
+/* Estilos para los botones de ordenación y paginación */
+.btn-outline-secondary {
+    border-color: #793E6C;
+    color: #793E6C;
+}
+
+.btn-outline-secondary:hover {
+    background-color: #793E6C;
+    color: white;
+}
+
+/* Estado activo para el botón de ordenación */
+.btn-outline-secondary.active {
+    background-color: #793E6C;
+    color: white;
+}
+
+.form-select:focus {
+    border-color: #793E6C;
+    box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25); 
+}
 </style>
\ No newline at end of file