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

3 files changed, 94 insertions, 8 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>