Polarcraft/web/components/team/None.vue

<template>
  <p class="my-10 text-center text-gray-300">
    Je zit momenteel niet in een team. Maak een team aan of wacht tot dat je geinvite wordt
  </p>
  <div class="mb-5 flex w-full justify-center gap-10">
    <span
      class="font-bold text-primary hover:cursor-pointer" :class="{ 'underline underline-offset-4': !createTeam }"
      @click="createTeam = false"
    >
      Team Invites
    </span>
    <span
      class="font-bold text-primary hover:cursor-pointer" :class="{ 'underline underline-offset-4': createTeam }"
      @click="createTeam = true"
    >
      Create Team
    </span>
  </div>
  <div v-if="!createTeam" class="text-center text-gray-300">
    You don't have any team invites
  </div>
  <div v-else class="flex w-full flex-col items-center gap-5">
    <Input class="w-full max-w-sm">Naam / Prefix</Input>
    <Colorpicker class="w-full max-w-sm" />
    <Button>Create Team</Button>
  </div>
</template>

<script setup>
const createTeam = ref(false)
</script>