89 lines
3.6 KiB
Vue
89 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import AppLayout from '@/Shared/Layouts/AppLayout.vue';
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import type { ConsoleData, GameData } from '@/types';
|
|
|
|
interface PaginatedGames {
|
|
data: GameData[];
|
|
links: Array<{ url: string | null; label: string; active: boolean }>;
|
|
}
|
|
|
|
interface Props {
|
|
selectedConsole: ConsoleData;
|
|
games: PaginatedGames;
|
|
user: {
|
|
name: string;
|
|
email: string;
|
|
};
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :title="selectedConsole.name" :user="user">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<Link :href="route('consoles.index')" class="text-purple-600 hover:underline">
|
|
Consoles
|
|
</Link>
|
|
<span class="text-gray-400">/</span>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ selectedConsole.name }}</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div v-if="games.data.length === 0" class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-12 text-center">
|
|
<p class="text-gray-500 text-lg">No games found for this console.</p>
|
|
<Link
|
|
:href="route('upload.index')"
|
|
class="mt-4 inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"
|
|
>
|
|
Upload ROMs
|
|
</Link>
|
|
</div>
|
|
|
|
<div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
<Link
|
|
v-for="game in games.data"
|
|
:key="game.id"
|
|
:href="route('games.show', game.slug)"
|
|
class="bg-white overflow-hidden shadow-xl sm:rounded-lg overflow-hidden hover:shadow-2xl transition-shadow"
|
|
>
|
|
<div class="aspect-[3/4] bg-gray-200 flex items-center justify-center overflow-hidden">
|
|
<img
|
|
v-if="game.coverPath"
|
|
:src="'/storage/' + game.coverPath"
|
|
:alt="game.title"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
<span v-else class="text-gray-400 text-sm">No cover</span>
|
|
</div>
|
|
<div class="p-2">
|
|
<div class="font-medium text-sm truncate">{{ game.title }}</div>
|
|
<div class="text-xs text-gray-500">{{ game.romFiles?.length ?? 0 }} ROM(s)</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div v-if="games.links.length > 3" class="mt-8 flex justify-center gap-2">
|
|
<Link
|
|
v-for="link in games.links"
|
|
:key="link.label"
|
|
:href="link.url || '#'"
|
|
class="px-3 py-1 rounded text-sm"
|
|
:class="{
|
|
'bg-purple-600 text-white': link.active,
|
|
'bg-white text-gray-700 hover:bg-gray-50': !link.active && link.url,
|
|
'text-gray-300 cursor-not-allowed': !link.url,
|
|
}"
|
|
v-html="link.label"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|