feat: create Modal component, rename InvitePopup to InviteModal and add invite generation

components/InviteModal.vue

@@ -0,0 +1,47 @@
+<template>
+  <Modal title="Create an invite">
+    <div id="invite-popup">
+      <div v-if="invite">
+        <p>{{ invite }}</p>
+        <button @click="copyInvite">Copy Link</button>
+      </div>
+      <div v-else>
+        <button @click="generateInvite">Generate Invite</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts" setup>
+import type { InviteResponse } from '~/types/interfaces';
+
+
+const invite = ref<string>();
+
+const route = useRoute();
+
+async function generateInvite(): Promise<void> {
+  const chars = "ABCDEFGHIJKLMNOQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890"
+  let randCode = "";
+  for (let i = 0; i < 6; i++) {
+    randCode += chars[Math.floor(Math.random() * chars.length)];
+  }
+  const createdInvite: InviteResponse | undefined = await fetchWithApi(
+    `/guilds/${route.params.serverId}/invites`,
+    { method: "POST", body: { custom_id: randCode } }
+  );
+
+  invite.value = createdInvite?.id;
+  return;
+}
+
+function copyInvite() {
+  const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
+  navigator.clipboard.writeText(inviteUrl!.href);
+}
+
+</script>
+
+<style>
+
+</style>