Last active
January 6, 2025 13:45
-
-
Save JeffreyWay/277609735106816f2e6b7d07f2db92be to your computer and use it in GitHub Desktop.
Learn Vue 3: Step By Step, Ep 26 - Code Organization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
hi, where can I find the unmodified version?
Found it :D
where ?
where ?
I found that in the laracast video comment section
{
"name": "Smiley Team",
"spots": 5,
"members": [
{ "id": 1, "name": "John Doe", "email": "[email protected]", "status": "Active" },
{ "id": 2, "name": "Sarah Doe", "email": "[email protected]", "status": "Active" },
{ "id": 3, "name": "Steven Doe", "email": "[email protected]", "status": "Active" },
{ "id": 4, "name": "Jen Doe", "email": "[email protected]", "status": "Active" },
{ "id": 5, "name": "Joe Doe", "email": "[email protected]", "status": "Active" }
]
}
<script setup>
</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="true">Add Member (0 Spots Left)</button>
</div>
<div>
<div class="inline-flex items-center text-3xl relative">
<img src="/smiley.png" alt="" class="mr-2">
<h3>Smiley 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">5</div>
</div>
</div>
</header>
<div class="place-self-center flex flex-col gap-y-3">
<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>
<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/[email protected]" alt="" class="rounded-full">
John Doe
</td>
<td class="text-gray-500 px-6 py-4">[email protected]</td>
<td class="px-6 py-4">
<button class="text-green-400 text-xl">Active</button>
</td>
</tr>
<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/[email protected]" alt="" class="rounded-full">
Sarah Doe
</td>
<td class="text-gray-500 px-6 py-4">[email protected]</td>
<td class="px-6 py-4">
<button class="text-green-400 text-xl">Active</button>
</td>
</tr>
<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/[email protected]" alt="" class="rounded-full">
Steven Doe
</td>
<td class="text-gray-500 px-6 py-4">[email protected]</td>
<td class="px-6 py-4">
<button class="text-green-400 text-xl">Active</button>
</td>
</tr>
<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/[email protected]" alt="" class="rounded-full">
Jen Doe
</td>
<td class="text-gray-500 px-6 py-4">[email protected]</td>
<td class="px-6 py-4">
<button class="text-green-400 text-xl">Active</button>
</td>
</tr>
<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/[email protected]" alt="" class="rounded-full">
Joe Doe
</td>
<td class="text-gray-500 px-6 py-4">[email protected]</td>
<td class="px-6 py-4">
<button class="text-green-400 text-xl">Active</button>
</td>
</tr>
</tbody>
</table>
<p class="text-right text-gray-600 italic">There are no remaining team spots. Upgrade to add more.</p>
</div>
<footer class="mt-12 bg-gray-100 py-4 text-center">
<h5 class="font-semibold text-lg">Smiley - 5 Member Team</h5>
</footer>
</template>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi, where can I find the unmodified version?