Polarcraft/webv2/pages/index.vue

<template>
  <div>
    <div class="mb-10 flex">
      <UAvatarGroup size="xl" class="mr-5">
        <UAvatar :src="discordAvatarUrl" alt="Discord Avatar" placeholder="DC" />
        <UAvatar v-if="minecraftAvatarUrl" :src="minecraftAvatarUrl" alt="Minecraft Avatar" placeholder="MC" />
      </UAvatarGroup>
      <h2>
        <span class="text-xl">
          Welkom, <b>{{ user.username }}</b>
        </span>
        <p class="text-gray-400">
          Happy to see you again
        </p>
      </h2>
    </div>
    <div class="grid w-full grid-cols-12 gap-6">
      <div class="col-span-6 rounded-lg border border-gray-700 bg-gray-800 p-5">
        Placeholder
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  middleware: ['auth'],
  title: 'Dashboard | Polarcraft'
})

const user = useState<IUser>('user')

const discordAvatarUrl = computed(() => {
  return 'https://cdn.discordapp.com/avatars/' + user.value.discord.id + '/' + user.value.discord.avatarHash + '.png'
})

const minecraftAvatarUrl = computed(() => {
  if (!user.value.minecraft) {
    return ''
  }
  return 'https://api.mineatar.io/face/' + user.value.minecraft.uuid + '?scale=16'
})
</script>