Make player a table of some sort

This commit is contained in:
2024-10-30 16:43:11 +01:00
parent 114eaddc94
commit 96cd4172b3

View File

@@ -6,14 +6,34 @@ const data: APIResponse<Player[]> = await res.json();
console.log(data); console.log(data);
--- ---
<div> <div class="overflow-x-auto p-5">
{ {
data.success && data.success && (
data.data.map((player) => ( <table class="min-w-full bg-white border border-gray-300">
<div> <thead>
<a href={`/player/${player.name}`}>{player.name}</a> <tr class="bg-gray-100">
</div> <th class="p-4 border border-gray-300 text-left">Name</th>
)) <th class="p-4 border border-gray-300 text-left">Guild</th>
<th class="p-4 border border-gray-300 text-left">#Notes</th>
<th class="p-4 border border-gray-300 text-left">#Associations</th>
</tr>
</thead>
<tbody>
{data.data.map((player) => (
<tr key={player.name} class="hover:bg-gray-50">
<td class="p-4 border border-gray-300">
<a href={`/player/${player.name}`} class="text-blue-600 hover:underline">
{player.name}
</a>
</td>
<td class="p-4 border border-gray-300">{player.guild.name}</td>
<td class="p-4 border border-gray-300">{player.notes}</td>
<td class="p-4 border border-gray-300">{player.associations}</td>
</tr>
))}
</tbody>
</table>
)
} }
{!data.success && <div>{data.message}</div>} {!data.success && <div>{data.message}</div>}
</div> </div>