summaryrefslogtreecommitdiff
path: root/iridescence/src/components/InventoryCard.vue
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components/InventoryCard.vue')
-rw-r--r--iridescence/src/components/InventoryCard.vue44
1 files changed, 44 insertions, 0 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>