reorganize all frontend items

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -4,56 +4,72 @@
       :class="{ 'on-hover': hover }"
       :elevation="hover ? 12 : 2"
       :to="route ? `/recipe/${slug}` : ''"
-      @click="$emit('click')"
       min-height="275"
+      @click="$emit('click')"
     >
-      <CardImage icon-size="200" :slug="slug" small :image-version="image">
+      <RecipeCardImage icon-size="200" :slug="slug" small :image-version="image">
         <v-expand-transition v-if="description">
-          <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal  " style="height: 100%;">
+          <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
             <v-card-text class="v-card--text-show white--text">
               {{ description | truncate(300) }}
             </v-card-text>
           </div>
         </v-expand-transition>
-      </CardImage>
-      <v-card-title class="my-n3 mb-n6 ">
+      </RecipeCardImage>
+      <v-card-title class="my-n3 mb-n6">
         <div class="headerClass">
           {{ name }}
         </div>
       </v-card-title>
 
       <v-card-actions>
-        <FavoriteBadge v-if="loggedIn" :slug="slug" show-always />
-        <Rating :value="rating" :name="name" :slug="slug" :small="true" />
+        <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
+        <RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
         <v-spacer></v-spacer>
-        <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :isCategory="false" />
-        <ContextMenu :slug="slug" :name="name" />
+        <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
+        <RecipeContextMenu :slug="slug" :name="name" />
       </v-card-actions>
     </v-card>
   </v-hover>
 </template>
 
 <script>
-import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
-import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
-import ContextMenu from "@/components/Recipe/ContextMenu";
-import CardImage from "@/components/Recipe/CardImage";
-import Rating from "@/components/Recipe/Parts/Rating";
 import { api } from "@/api";
+import RecipeFavoriteBadge from "./RecipeFavoriteBadge";
+import RecipeChips from "./RecipeChips";
+import RecipeContextMenu from "./RecipeContextMenu";
+import RecipeCardImage from "./RecipeCardImage";
+import RecipeRating from "./RecipeRating";
 export default {
-  components: { FavoriteBadge, RecipeChips, ContextMenu, Rating, CardImage },
+  components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
   props: {
-    name: String,
-    slug: String,
-    description: String,
-    rating: Number,
-    image: String,
-
+    name: {
+      type: String,
+      required: true,
+    },
+    slug: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: null,
+    },
+    rating: {
+      type: Number,
+      default: 0,
+    },
+    image: {
+      type: String,
+      default: null,
+    },
     route: {
+      type: Boolean,
       default: true,
     },
     tags: {
-      default: true,
+      type: Array,
+      default: () => [],
     },
   },
   data() {