apps/Recipes/Controllers/FavoritesController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Lycoreco\Apps\Recipes\Controllers;
+
+use Lycoreco\Apps\Recipes\Models\RecipeModel;
+use Lycoreco\Includes\BaseController;
+
+define('FAVORITES_MAX_RECIPES', 20); 
+
+class FavoritesController extends BaseController
+{
+    protected $template_name = APPS_PATH . '/Recipes/Templates/favorites.php';
+
+    public function get_context_data()
+    {
+        $context = parent::get_context_data();
+
+        $context['recipes'] = RecipeModel::filter(
+            [],
+            ['-obj.created_at'],
+            FAVORITES_MAX_RECIPES
+        );
+
+        return $context;
+    }
+}

apps/Recipes/Templates/favorites.php

@@ -0,0 +1,31 @@
+<?php
+require_once APPS_PATH . '/Recipes/components.php';
+
+the_header(
+    'Favorites',
+    'Here are your favorite recipes. Enjoy cooking!',
+    'favorites-page',
+    [
+        ['keywords', 'favorites, recipes, cooking, food'],
+    ]
+);
+?>
+
+<div class="container">
+    <div class="favorites">
+        <div class="favorites-items">
+            <?php
+            for( $i = 0; $i < 5; $i++) {
+                foreach ($context['recipes'] as $recipe) {
+                the_product_item($recipe);
+            }
+            }
+            
+            ?>
+        </div>
+    </div>
+</div>
+
+<?php
+the_footer();
+?>

apps/Recipes/urls.php

@@ -8,4 +8,5 @@ $recipes_urls = [
     new Path('/recipe/[:int]/export-pdf', new Controllers\ExportPdfController(), 'export-pdf'),
     new Path('/catalog', new Controllers\CatalogController(), 'catalog'),
     new Path('/daily-meals', new Controllers\DailyMealsController, 'daily-meals'),
+    new Path('/favorites', new Controllers\FavoritesController(), 'favorites'),
 ];

assets/css/style.css

@@ -734,8 +734,11 @@ input[type="checkbox"]{
 }
 
 .catalog-recipe {
-    display: block;
-    width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
 }
 
 .catalog-recipe__image {
@@ -1063,6 +1066,23 @@ label {
     margin-top: 46px;
 }
 
+.favorites-items a {
+    text-decoration: none;
+}
+
+.favorites{
+    margin-top: 46px;
+    display: flex;
+}
+
+.favorites-items{
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 25px;
+    row-gap: 40px;
+}
+
 @media (max-width: 768px) {
 
     .catalog-items {
@@ -1071,6 +1091,8 @@ label {
         margin-right: 0;
     }
 
+
+
     .welcome__inner {
         flex-direction: column;
     }
@@ -1238,6 +1260,11 @@ label {
         grid-template-rows: repeat(6, 100px);
     }
 
+    .favorites-items {
+        width: 100%;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
 
 }
 
@@ -1272,6 +1299,13 @@ label {
         padding: 5px;
     }
 
+    .favorites-items {
+        margin-right: 0;
+        justify-items: center;
+        align-items: center;
+        padding: 5px;
+    }
+
     .catalog-recipe {
         display: flex;
         flex-direction: column;
@@ -1298,4 +1332,10 @@ label {
         grid-template-columns: 1fr;
         margin-right: 0;
     }
+
+    .favorites-items {
+        width: 100%;
+        grid-template-columns: 1fr;
+        margin-right: 0;
+    }
 }

components/templates/layout/header.php

@@ -55,7 +55,7 @@
                         <li class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
                         </li>
                         <li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>" class="nav-link">RECIPES</a></li>
-                        <li class="nav-item"><a href="#" class="nav-link">FAVORITES</a></li>
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:favorites")?>" class="nav-link">FAVORITES</a></li>
                         <li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>" class="nav-link">MEAL A DAY</a></li>
                         <li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
                     </ul>