v2 search basic display of recipes

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -16,9 +16,10 @@
 
         <div class="row">
           <div class="col col-md-12">
-            <ul>
-              <li v-for="r in recipes" v-bind:key="r.id">{{ r.name }}</li>
-            </ul>
+            <b-card-group deck>
+              <recipe-card style="max-width: 15vw; height: 30vh" v-for="r in recipes" v-bind:key="r.id" :recipe="r"></recipe-card>
+            </b-card-group>
+
           </div>
         </div>
 
@@ -45,13 +46,14 @@ import {ResolveUrlMixin} from "@/utils/utils";
 import LoadingSpinner from "@/components/LoadingSpinner";
 
 import {ApiApiFactory} from "@/utils/openapi/api.ts";
+import RecipeCard from "@/components/RecipeCard";
 
 Vue.use(BootstrapVue)
 
 export default {
   name: 'RecipeSearchView',
   mixins: [],
-  components: {},
+  components: {RecipeCard},
   data() {
     return {
       recipes: [],

vue/src/components/RecipeCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div>
+      <b-card no-body>
+
+        <b-card-img-lazy :src=recipe.image v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
+
+        <b-card-body :title=recipe.name>
+          <recipe-context-menu :recipe="recipe"></recipe-context-menu>
+          <b-card-text>
+            {{ recipe.description }}
+          </b-card-text>
+        </b-card-body>
+
+      </b-card>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import RecipeContextMenu from "@/components/RecipeContextMenu";
+export default {
+  name: "RecipeCard",
+  components: {RecipeContextMenu},
+  props: {
+    recipe: Object,
+  },
+}
+</script>
+
+<style scoped>
+
+</style>