1 files changed, 45 insertions, 0 deletions
diff --git a/src/components/new_brand.vue b/src/components/new_brand.vue
new file mode 100644
index 0000000..e0deb83
--- /dev/null
+++ b/src/components/new_brand.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+import { useToast } from 'vue-toast-notification'
+
+const toast = useToast({
+  position: 'top-right'
+})
+
+const brandName = ref('')
+
+const submit = async (e) => {
+  e.preventDefault()
+  try {
+    const res = await axios.post('/brand', {
+      name: brandName._value
+    })
+    toast.success('Successfully added a new brand.')
+    brandName.value = ''
+    // TODO: refresh items list
+  } catch (err) {
+    toast.error('An unhandled exception occoured. Please check logs')
+    console.error(err)
+  }
+}
+</script>
+
+<template>
+  <form class="d-flex align-items-center justify-content-center m-3" v-on:submit="submit">
+    <div class="form-floating">
+      <input
+        id="brand-name-input"
+        type="text"
+        class="form-control"
+        placeholder=""
+        v-model="brandName"
+      />
+      <label for="brand-name-input">New Brand Name</label>
+    </div>
+
+    <div class="form-floating m-3">
+      <input type="submit" value="Add New Brand" class="btn btn-primary" />
+    </div>
+  </form>
+</template>