Prop passing variables

src/components/layouts/AppBar.vue

@@ -1,53 +1,51 @@
 <template>
-  <div>
-    <v-navigation-drawer
-      v-model="drawer"
-      temporary
-      position="right"
-    >
-      <v-list density="compact">
-        <v-list-subheader>Menu</v-list-subheader>
-        <v-list-item
-          v-for="(item, i) in sideBarItems"
-          :key="i"
-          :value="item"
-          active-class="primary"
-        >
-          <v-list-item-avatar start>
-            <v-icon :icon="item.icon" />
-          </v-list-item-avatar>
-          <v-list-item-title v-text="item.text" />
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-app-bar prominent>
-      <v-btn
-        variant="plain"
-        @click="toIndex"
+  <v-navigation-drawer
+    v-model="drawer"
+    temporary
+    position="right"
+  >
+    <v-list density="compact">
+      <v-list-subheader>Menu</v-list-subheader>
+      <v-list-item
+        v-for="(item, i) in sideBarItems"
+        :key="i"
+        :value="item"
+        active-class="primary"
       >
-        <v-app-bar-title>Cyber Cookbook</v-app-bar-title>
-      </v-btn>
-      <v-spacer />
-      <v-btn icon="mdi-magnify" />
+        <v-list-item-avatar start>
+          <v-icon :icon="item.icon" />
+        </v-list-item-avatar>
+        <v-list-item-title v-text="item.text" />
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+
+  <v-app-bar prominent>
+    <v-btn
+      variant="plain"
+      @click="toIndex"
+    >
+      <v-app-bar-title>Cyber Cookbook</v-app-bar-title>
+    </v-btn>
+    <v-spacer />
+    <v-btn icon="mdi-magnify" />
 
-      <v-btn @click="toRecipeCenter">
-        Recipe Center
-      </v-btn>
+    <v-btn @click="toRecipeCenter">
+      Recipe Center
+    </v-btn>
 
-      <v-btn
-        variant="outlined"
-        color="primary"
-        class="ml-4 mr-4"
-      >
-        Connect!
-      </v-btn>
-      <v-btn
-        icon="mdi-cookie-plus"
-        @click.stop="drawer = !drawer"
-      />
-    </v-app-bar>
-  </div>
+    <v-btn
+      variant="outlined"
+      color="primary"
+      class="ml-4 mr-4"
+    >
+      Connect!
+    </v-btn>
+    <v-btn
+      icon="mdi-cookie-plus"
+      @click.stop="drawer = !drawer"
+    />
+  </v-app-bar>
 </template>
 
 <script>

src/components/layouts/IndexMain.vue

@@ -1,7 +1,43 @@
 <template>
-  <div>
-    <v-parallax src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"></v-parallax>
-  </div>
+  <v-container>
+    <v-timeline align="start">
+      <v-timeline-item>
+        <template v-slot:opposite>
+          Opposite content
+        </template>
+        <div>
+          <div class="text-h6">Content title</div>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+      </v-timeline-item>
+
+      <v-timeline-item>
+        <template v-slot:opposite>
+          Opposite content
+        </template>
+        <div>
+          <div class="text-h6">Content title</div>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+      </v-timeline-item>
+
+      <v-timeline-item>
+        <template v-slot:opposite>
+          Opposite content
+        </template>
+        <div>
+          <div class="text-h6">Content title</div>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+      </v-timeline-item>
+    </v-timeline>
+  </v-container>
 </template>
 <script>
 export default {

src/components/layouts/RecipeShelf.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-container>
+    <v-row
+      v-for="n in rowCount"
+      :key="n"
+    >
+      <v-col
+        v-for="k in colCount"
+        :key="k"
+      >
+        <div v-if="((n - 1) * colCount + k) < recipeList.length">
+          <RecipeCard :recipeInfo="recipeList[((n - 1) * colCount + k)]" />
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+import useRecipeList from "../../hooks/useRecipeList";
+import RecipeCard from "../widgets/RecipeCard.vue";
+import { ref, toRef } from "vue";
+
+export default {
+  name: "RecipeShelf",
+
+  components: {
+    RecipeCard,
+  },
+
+  setup() {
+    let colCount = 3;
+    let recipeList = useRecipeList();
+    let rowCount = Math.trunc(recipeList.length / colCount);
+
+    return { colCount, rowCount, recipeList };
+  },
+};
+</script>

src/components/widgets/RecipeCard.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="344"
+  >
+    <v-img
+      src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
+      height="200px"
+      cover
+    ></v-img>
+
+    <v-card-title>
+      {{recipeData.name}}
+    </v-card-title>
+
+    <v-card-subtitle>
+      1,000 miles of wonder
+    </v-card-subtitle>
+
+    <v-card-actions>
+      <v-btn
+        color="orange-lighten-2"
+        variant="text"
+      >
+        Explore
+      </v-btn>
+
+      <v-spacer></v-spacer>
+
+      <v-btn
+        :icon="showDetail ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        @click="showDetail = !showDetail"
+      ></v-btn>
+    </v-card-actions>
+
+    <v-expand-transition>
+      <div v-show="showDetail">
+        <v-divider></v-divider>
+
+        <v-card-text>
+          I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
+        </v-card-text>
+      </div>
+    </v-expand-transition>
+  </v-card>
+</template>
+
+<script>
+import { ref, reactive } from "vue";
+export default {
+  name: "RecipeCard",
+
+  props: {
+    recipeInfo: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+
+  setup(props) {
+    let showDetail = ref(false);
+    let recipeData = reactive(props.recipeInfo);
+
+    return { showDetail, recipeData };
+  },
+};
+</script>

src/hooks/useRecipeList.js

@@ -0,0 +1,41 @@
+import { reactive } from "vue";
+export default function () {
+    let recipeList = reactive([])
+
+    function getRecipeList() {
+        let recipe1 = reactive({
+            gene: "sd2fdf1g123vg",
+            name: "Shit Cake",
+            ingredientsGene: ["shit233", "egg233", "flour233"],
+            ingredientsQuantity: [100000, 60000, 60000]
+        })
+        let recipe2 = reactive({
+            gene: "fhf1age45gd",
+            name: "Shit Scone",
+            ingredientsGene: ["shit233", "butter233", "flour233"],
+            ingredientsQuantity: [20000, 32000, 54000]
+        })
+        let recipe3 = reactive({
+            gene: "f8wjkjef67ij",
+            name: "Shit Smoothie",
+            ingredientsGene: ["shit233", "pee233", "milk233"],
+            ingredientsQuantity: [20000, 150000, 60000]
+        })
+
+        var i = 0
+
+        for (i = 0; i < 4; i++) {
+            recipeList.push(recipe1)
+        }
+        for (i = 0; i < 2; i++) {
+            recipeList.push(recipe2)
+        }
+        for (i = 0; i < 3; i++) {
+            recipeList.push(recipe3)
+        }
+    }
+
+    getRecipeList()
+
+    return recipeList
+}

src/pages/Index.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <AppBar />
-    <IndexMain />
+    <v-main>
+      <IndexMain />
+    </v-main>
   </div>
 </template>
 

src/pages/RecipeCenter.vue

@@ -1,17 +1,22 @@
 <template>
   <div>
     <AppBar />
+    <v-main>
+      <RecipeShelf />
+    </v-main>
   </div>
 </template>
 
 <script>
 import AppBar from "../components/layouts/AppBar.vue";
+import RecipeShelf from "../components/layouts/RecipeShelf.vue";
 
 export default {
   name: "RecipeCenter",
 
   components: {
     AppBar,
+    RecipeShelf,
   },
 
   data: () => ({}),