feat: introducing self hosted admin dashboard package (#12)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="flex justify-between">
+    <h3
+      class="mt-10 text-2xl justify-start font-medium text-zinc-800 dark:text-gray-200"
+    >
+      Members
+    </h3>
+    <div class="mt-8 ml-2">
+      <button
+        @click="addNewMember"
+        class="px-4 py-2 justify-right text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
+      >
+        Add New
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      v-for="(member, i) in members"
+      :key="i"
+      class="mt-3 flex justify-center"
+    >
+      <input
+        type="text"
+        placeholder="Enter email"
+        v-model="member.name"
+        class="bg-primaryDark p-2 border-primaryLight w-90 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+      />
+      <select
+        v-model="member.role"
+        class="bg-primaryDark ml-0.5 p-2 pr-3 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+      >
+        <option value="owner">Owner</option>
+        <option value="editor">Editor</option>
+        <option value="viewer">Viewer</option>
+      </select>
+      <div
+        class="bg-primaryDark flex items-center ml-0.5 border-primaryLight px-2 text-red-600 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+      >
+        <span class="flex" @click="deleteMemberRow(i)">
+          <icon-lucide-trash />
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex justify-center sm:justify-end mt-8">
+    <router-link to="/users">
+      <button
+        @click="submitTeam"
+        class="px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
+      >
+        Save
+      </button>
+    </router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+const members = reactive([
+  {
+    name: '',
+    role: 'owner',
+  },
+]);
+
+const addNewMember = () => {
+  members.push({
+    name: '',
+    role: 'admin',
+  });
+};
+
+const deleteMemberRow = (index: number) => {
+  members.splice(index, 1);
+};
+
+const submitTeam = () => {
+  console.log('members', members);
+};
+</script>