recipe card

vue3/src/pages/MealPlanPage.vue

@@ -16,6 +16,15 @@
                 </v-card>
             </v-col>
         </v-row>
+
+        <v-row>
+            <v-col >
+                <recipe-card :recipe="recipe" ></recipe-card>
+            </v-col>
+            <v-col>
+                <recipe-card :recipe="recipe_not_loaded" :loading="true"></recipe-card>
+            </v-col>
+        </v-row>
     </v-container>
 
 
@@ -24,14 +33,28 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
+import RecipeCard from "@/components/display/RecipeCard.vue";
+import {ApiApi, Recipe, RecipeOverview} from "@/openapi";
 
 
 export default defineComponent({
     name: "MealPlanPage",
-    components: {ModelSelect},
+    components: {ModelSelect, RecipeCard},
     data() {
-        return {}
-    }
+        return {
+            recipe: {} as RecipeOverview,
+            recipe_not_loaded: {} as RecipeOverview,
+        }
+    },
+    mounted() {
+        const api = new ApiApi()
+        api.apiRecipeList({pageSize: 1}).then(r => {
+            if(r.results){
+                this.recipe = r.results[0]
+            }
+        })
+    },
+
 })
 </script>
 

vue3/src/pages/RecipeSearchPage.vue

@@ -47,6 +47,7 @@
 
 
         <!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
+        <!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
         <horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
         <horizontal-recipe-scroller title="Top Rated" :skeletons="2" :recipes="high_rated_recipes" icon="fas fa-star"></horizontal-recipe-scroller>
         <horizontal-recipe-scroller :title="random_keyword.label" :skeletons="4" :recipes="random_keyword_recipes" icon="fas fa-tags"></horizontal-recipe-scroller>