new table shizz

src/CreateTable.vue

@@ -0,0 +1,54 @@
+<script setup>
+import axios from 'axios'
+import { reactive, ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { Form } from '@primevue/forms'
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import Card from 'primevue/card'
+import Chip from 'primevue/chip'
+import Dropdown from 'primevue/dropdown';
+
+const table_name = ref("Default Table Name")
+const table_link = ref("default_table_link")
+const version = ref(12)
+
+const availableVersion = ref([
+  11, 12
+]);
+
+function saveTable() {
+  axios.post('http://localhost/api/tables', { "table_name": table_name.value, "table_link": table_link.value, })
+}
+
+</script>
+
+<style>
+@import 'primeicons/primeicons.css';
+
+.detailCard {
+  margin: 25px;
+}
+
+.button-box {
+  margin: 5px;
+}
+</style>
+
+<template>
+  <Card class="detailCard flex">
+    <template #title> New Table Details </template>
+    <template #content>
+      <div class="flex flex-column">
+        <InputText class="button-box" type="text" placeholder="Table Name" v-model="table_name" />
+        <InputText class="button-box" type="text" placeholder="Table Link" v-model="table_link" />
+        <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
+      </div>
+    </template>
+    <template #footer>
+      <Button class="button-box" label="Save" @click="saveTable()" />
+      <Button class="button-box" label="Clear" />
+    </template>
+  </Card>
+
+</template>