made inventory cards arranged in a column list with basic info from inventory in store

6 files changed, 183 insertions, 12 deletions

diff --git a/iridescence/src/components/InventoryCard.vue b/iridescence/src/components/InventoryCard.vue
new file mode 100644
index 0000000..75e683a
--- /dev/null
+++ b/iridescence/src/components/InventoryCard.vue
@@ -0,0 +1,44 @@
+<template>
+  <div id="inventoryCard">
+    <div class="card">
+      <div class="card-image">
+        <figure class="image is-4by3">
+          <img
+            src="https://bulma.io/images/placeholders/1280x960.png"
+            :alt="name"
+          />
+        </figure>
+      </div>
+      <div class="card-content">
+        <div class="content">
+          <p class="title is-4">{{ name }}</p>
+          <p class="subtitle is-4">
+            {{ dollars(cents) }}
+          </p>
+          <p class="subtitle is-6">{{ quantity }} in stock.</p>
+        </div>
+
+        <div class="content">
+          {{ description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InventoryCard",
+  props: {
+    id: Number,
+    name: String,
+    quantity: Number,
+    cents: Number,
+    imgPath: String,
+    description: String
+  },
+  methods: {
+    dollars: cents => "$ " + (cents / 100).toFixed(2)
+  }
+};
+</script>
diff --git a/iridescence/src/components/InventoryList.vue b/iridescence/src/components/InventoryList.vue
new file mode 100644
index 0000000..dbda9a4
--- /dev/null
+++ b/iridescence/src/components/InventoryList.vue
@@ -0,0 +1,37 @@
+<template>
+  <div id="inventoryList">
+    <section class="section">
+      <div class="container">
+        <div class="columns is-multiline is-variable is-7-desktop">
+          <div
+            class="column is-one-quarter"
+            v-for="item in inventory"
+            :key="item.id"
+          >
+            <InventoryCard v-bind="item"></InventoryCard>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import InventoryCard from "@/components/InventoryCard.vue";
+
+export default {
+  name: "InventoryList",
+  components: {
+    InventoryCard
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    inventory() {
+      return this.$store.getters.inventory;
+    }
+  },
+  methods: {}
+};
+</script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index bf287b2..b83834a 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -1,9 +1,14 @@
 <template>
   <div id="navbar">
-    <nav class="navbar">
+    <nav class="navbar is-primary">
       <div class="navbar-brand">
         <div class="navbar-item">
           <img src="@/assets/logo.png" />
+          <div class="navbar-item">
+            <span>
+              The Glassy Ladies
+            </span>
+          </div>
         </div>
         <a class="navbar-burger burger" v-on:click="toggleNavMenu">
           <span></span>
@@ -13,12 +18,12 @@
       </div>
       <div :class="navMenu">
         <div class="navbar-start">
-          <a class="navbar-item">
-            <router-link to="/">Home</router-link>
-          </a>
-          <a class="navbar-item">
-            <router-link to="/about">About</router-link>
-          </a>
+          <router-link to="/" class="navbar-item">
+            Home
+          </router-link>
+          <router-link to="/about" class="navbar-item">
+            About
+          </router-link>
         </div>
         <div class="navbar-end">
           <div class="navbar-item">
@@ -26,7 +31,7 @@
               <button class="button">
                 Cart (5)
               </button>
-              <button class="button is-primary">
+              <button class="button is-info">
                 Checkout
               </button>
             </div>
diff --git a/iridescence/src/router/index.js b/iridescence/src/router/index.js
index 9a1e0c2..28b1079 100644
--- a/iridescence/src/router/index.js
+++ b/iridescence/src/router/index.js
@@ -30,7 +30,8 @@ const routes = [
 const router = new VueRouter({
   mode: "history",
   base: process.env.BASE_URL,
-  routes
+  routes: routes,
+  linkExactActiveClass: "is-active"
 });
 
 export default router;
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index fb6015f..4a851ef 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -4,7 +4,85 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
+  state: {
+    inventory: [
+      {
+        id: 1,
+        name: "Beach Box",
+        quantity: 5,
+        cents: 1100,
+        imgPath: "/beach_box.jpg",
+        description: "This is a beach box."
+      },
+      {
+        id: 2,
+        name: "Wind Chime",
+        quantity: 2,
+        cents: 4500,
+        imgPath: "/wind-chime.jpg",
+        description: "Makes noise when the wind blows."
+      },
+      {
+        id: 3,
+        name: "Beach Box",
+        quantity: 5,
+        cents: 1100,
+        imgPath: "/beach_box.jpg",
+        description: "This is a beach box."
+      },
+      {
+        id: 4,
+        name: "Wind Chime",
+        quantity: 2,
+        cents: 4500,
+        imgPath: "/wind-chime.jpg",
+        description: "Makes noise when the wind blows."
+      },
+      {
+        id: 5,
+        name: "Beach Box",
+        quantity: 5,
+        cents: 1100,
+        imgPath: "/beach_box.jpg",
+        description: "This is a beach box."
+      },
+      {
+        id: 6,
+        name: "Wind Chime",
+        quantity: 2,
+        cents: 4500,
+        imgPath: "/wind-chime.jpg",
+        description: "Makes noise when the wind blows."
+      },
+      {
+        id: 7,
+        name: "Beach Box",
+        quantity: 5,
+        cents: 1100,
+        imgPath: "/beach_box.jpg",
+        description: "This is a beach box."
+      },
+      {
+        id: 8,
+        name: "Wind Chime",
+        quantity: 2,
+        cents: 4500,
+        imgPath: "/wind-chime.jpg",
+        description: "Makes noise when the wind blows."
+      },
+      {
+        id: 9,
+        name: "Wind Chime",
+        quantity: 2,
+        cents: 4500,
+        imgPath: "/wind-chime.jpg",
+        description: "Makes noise when the wind blows."
+      }
+    ]
+  },
+  getters: {
+    inventory: state => state.inventory
+  },
   mutations: {},
   actions: {},
   modules: {}
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index e3b0eb4..5aef877 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -3,15 +3,21 @@
 	  allow users to sort, filter, and search for items and add them to their
 	  cart. -->
 
-  <div>
+  <div id="home">
     <figure class="image is-128x128">
       <img alt="The Glassy Ladies" src="../assets/logo.png" />
     </figure>
+    <InventoryList></InventoryList>
   </div>
 </template>
 
 <script>
+import InventoryList from "@/components/InventoryList.vue";
+
 export default {
-  name: "Home"
+  name: "Home",
+  components: {
+    InventoryList
+  }
 };
 </script>