work on planner templates in progress

web/vue/src/components/RecipeDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box">
+  <div class="container box">
   <button @click="$emit('close')" class="button is-pulled-right">X close</button>
     <h4 class="title">{{ item.title }}</h4>
     <h6 class="subtitle">{{ categories[item.category].name }}</h6>
@@ -15,8 +15,21 @@
 </template>
 
 <script>
-
 export default {
   name: 'RecipeDetails',
-  props: ['item'],
+  props: {
+    item: {
+      type: Object,
+      required: true,
+      default () {
+        return {id: 0, title: "", category: 0, ingredients: ""};
+      },
+    }
+  },
+  data () {
+    return {
+      categories: ["test", "test", "test"],
+    }
+  }
 }
+</script>