gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: redesign InviteModal

Browse source
This commit is contained in:
SauceyRed 2025-07-13 04:11:06 +02:00
parent c2ae978ec1
commit f83b3f34d8
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 23 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

35
components/InviteModal.vue
View file

@ -1,20 +1,21 @@
<template>
<Modal v-bind="props" :title="props.title || 'Create an invite'">
<div id="invite-popup">
<div v-if="invite">
<p id="invite-label">{{ invite }}</p>
<button @click="copyInvite('link')">Copy Link</button>
<button @click="copyInvite('code')">Copy Code</button>
</div>
<div v-else>
<button @click="generateInvite">Generate Invite</button>
</div>
</div>
</Modal>
<Modal v-bind="props" :title="props.title || 'Create an invite'">
<div v-if="invite" id="invite-body">
<div id="invite-label">{{ invite }}</div>
<div id="invite-buttons">
<Button text="Copy as link" variant="neutral" :callback="() => copyInvite('link')" />
<Button text="Copy as code" variant="neutral" :callback="() => copyInvite('code')" />
</div>
</div>
<div v-else>
<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
</div>
</Modal>
</template>
<script lang="ts" setup>
import type { InviteResponse, ModalProps } from '~/types/interfaces';
import Button from './UserInterface/Button.vue';
const props = defineProps<ModalProps & { guildId: string }>();
@ -52,8 +53,18 @@ function copyInvite(type: "link" | "code") {
<style scoped>
#invite-body, #invite-buttons {
display: flex;
gap: 1em;
}
#invite-body {
flex-direction: column;
}
#invite-label {
text-align: center;
color: aquamarine;
}
</style>