Learn Vue 3: Step By Step, Ep 26 - Code Organization

TeamFooter.vue

<template>
  <footer class="mt-12 bg-gray-100 py-4 text-center">
    <h5 class="font-semibold text-lg">{{ team.name }} - {{ team.spots }} Member Team</h5>
  </footer>
</template>

<script setup>
defineProps({
  team: Object
});
</script>

TeamHeader.vue

<script setup>
  defineProps({
    team: Object
  })
</script>

<template>
  <header class="flex justify-between">
    <div>
      <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded disabled:bg-gray-400"
              :disabled="team.members.length === team.spots">Add Member ({{ team.spots - team.members.length }} Spots Left)</button>
    </div>

    <div>
      <div class="inline-flex items-center text-3xl relative">
        <img src="/smiley.png" alt="" class="mr-2">
        <h3>{{ team.name }} Team</h3>
        <div class="bg-green-400 w-5 h-5 text-xs text-white rounded-full flex justify-center items-center absolute -right-4 -top-2">{{ team.spots }}</div>
      </div>
    </div>
  </header>
</template>

TeamMember.vue

<template>
  <tr class="bg-gray-100 px-12">
    <td class="text-xl font-medium flex items-center gap-x-4 px-6 py-4">
      <img :src="`https://i.pravatar.cc/50?u=${email}`" alt="" class="rounded-xl">
      {{ name }}
    </td>

    <td class="text-gray-500 px-6 py-4">{{ email }}</td>

    <td class="px-6 py-4">
      <button class="text-green-400 text-xl">{{ status }}</button>
    </td>
  </tr>
</template>

<script setup>
defineProps({
  name: String,
  email: String,
  status: String
})
</script>

TeamMembers.vue

<script setup>
import TeamMember from "@/components/Teams/TeamMember.vue";

defineProps({
  team: Object
});
</script>

<template>
  <table class="table-fixed border-spacing-2 border-separate">
    <thead>
      <th class="text-left px-6 py-2">Name</th>
      <th class="text-left px-6 py-2">Email</th>
      <th class="text-left px-6 py-2">Status</th>
    </thead>

    <tbody>
      <TeamMember v-for="member in team.members" :name="member.name" :email="member.email" :status="member.status" />
    </tbody>
  </table>

  <p class="text-right text-gray-600 italic" v-show="team.members.length === team.spots">There are no remaining team spots. Upgrade to add more.</p>
</template>

TeamView.vue

<script setup>
import team from "@/team.json";
import TeamHeader from "@/components/Teams/TeamHeader.vue";
import TeamMembers from "@/components/Teams/TeamMembers.vue";
import TeamFooter from "@/components/Teams/TeamFooter.vue";
</script>

<template>
  <TeamHeader :team="team" />

  <div class="place-self-center flex flex-col gap-y-3" style="width: 725px">
    <TeamMembers :team="team" />
  </div>

  <TeamFooter :team="team" />
</template>