1 files changed, 52 insertions, 0 deletions
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue
new file mode 100644
index 0000000..d452e83
--- /dev/null
+++ b/iridescence/src/components/ProductSearch.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="productSearch">
+    <div class="field is-grouped is-grouped-multiline">
+      <div class="control is-expanded">
+        <input
+          class="input is-primary is-medium"
+          type="text"
+          placeholder="Find something in particular..."
+          v-model.trim="term"
+          @input="updateSearch"
+          autofocus
+        />
+      </div>
+      <div class="control">
+        <div class="select is-primary is-medium">
+          <select>
+            <option>Featured</option>
+            <option>Name/A-Z</option>
+            <option>Newest to Oldest</option>
+            <option>Oldest to Newest</option>
+            <option>Low to High</option>
+            <option>High to Low</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <content class="has-text-centered" v-if="noResults">
+      <p>We couldn't find anything like that...</p>
+    </content>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductSearch",
+  data() {
+    return {
+      term: ""
+    };
+  },
+  computed: {
+    noResults() {
+      return !this.$store.getters.products.length;
+    }
+  },
+  methods: {
+    updateSearch() {
+      this.$store.commit("searchTerm", this.term);
+    }
+  }
+};
+</script>