andrewwallacespeckle
46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div class="space-y-8 mb-8">
|
|
<h1 class="text-heading-xl text-center">Join workspace</h1>
|
|
<div class="p-4 border border-outline-2 rounded text-body-xs">
|
|
You're accepting an invitation to join
|
|
<span class="font-medium">{{ invite.workspace.name }}</span>
|
|
<!-- prettier-ignore -->
|
|
<template v-if="invite.user">
|
|
as
|
|
<div class="inline-flex items-center">
|
|
<UserAvatar :user="invite.user" size="sm" class="mr-1" />
|
|
<span class="font-medium">{{ invite.user.name }}</span>
|
|
</div>.
|
|
</template>
|
|
<template v-else>
|
|
using the
|
|
<span class="font-medium">{{ invite.email }}</span>
|
|
email address.
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { graphql } from '~/lib/common/generated/gql'
|
|
import type { AuthWorkspaceInviteHeader_PendingWorkspaceCollaboratorFragment } from '~/lib/common/generated/gql/graphql'
|
|
|
|
graphql(`
|
|
fragment AuthWorkspaceInviteHeader_PendingWorkspaceCollaborator on PendingWorkspaceCollaborator {
|
|
id
|
|
workspace {
|
|
id
|
|
name
|
|
}
|
|
email
|
|
user {
|
|
id
|
|
...LimitedUserAvatar
|
|
}
|
|
}
|
|
`)
|
|
|
|
defineProps<{
|
|
invite: AuthWorkspaceInviteHeader_PendingWorkspaceCollaboratorFragment
|
|
}>()
|
|
</script>
|