45 lines
1.6 KiB
Vue
45 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import AppLayout from '@/Shared/Layouts/AppLayout.vue';
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import type { ConsoleData } from '@/types';
|
|
|
|
interface Props {
|
|
consoles: ConsoleData[];
|
|
user: {
|
|
name: string;
|
|
email: string;
|
|
};
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Consoles" :user="user">
|
|
<template #header>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Consoles</h2>
|
|
</template>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
<Link
|
|
v-for="console in consoles"
|
|
:key="console.id"
|
|
:href="route('consoles.show', console.slug)"
|
|
class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6 hover:shadow-2xl transition-shadow"
|
|
>
|
|
<div class="text-center">
|
|
<div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
|
|
<span class="text-2xl">🎮</span>
|
|
</div>
|
|
<h3 class="font-semibold text-lg">{{ console.name }}</h3>
|
|
<p class="text-gray-500 text-sm mt-1">{{ console.gamesCount }} games</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|