44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="text-2xl font-bold mb-4">Replays</h1>
|
|
|
|
<table class="w-full border text-left">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="p-2">ID</th>
|
|
<th class="p-2">Email</th>
|
|
<th class="p-2">Started</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr v-for="replay in data.replays" :key="replay.id" class="border-t">
|
|
<td class="p-2">{{ replay.id }}</td>
|
|
<td class="p-2">{{ replay.user.email ?? replay.user.display_name }}</td>
|
|
<td class="p-2">{{ replay.started_at }}</td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-4 flex space-x-2">
|
|
<template v-for="link in data.meta.links" :key="link.label">
|
|
<Link
|
|
:href="link.url"
|
|
class="px-2 py-1 border rounded"
|
|
:class="{ 'font-bold bg-gray-200': link.active, 'text-gray-400': !link.url }"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Link, usePage } from '@inertiajs/vue3'
|
|
|
|
const props = defineProps({
|
|
data: Object
|
|
})
|
|
</script>
|