56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useTitle } from "@vueuse/core";
|
|
import { gamesApiListEventSteamGames } from "./api";
|
|
import type { SteamGameOut } from "./api/types.gen";
|
|
import SteamStoreCard from "./components/SteamStoreCard.vue";
|
|
|
|
interface Props {
|
|
eventPath: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { t } = useI18n();
|
|
useTitle(computed(() => t("games.title")));
|
|
|
|
const games = ref<SteamGameOut[]>([]);
|
|
const loading = ref(true);
|
|
|
|
onMounted(async () => {
|
|
const response = await gamesApiListEventSteamGames({
|
|
path: { event_path: props.eventPath },
|
|
});
|
|
if (response.data) {
|
|
games.value = response.data;
|
|
}
|
|
loading.value = false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-1 bg-base-300 flex justify-center px-4 py-12">
|
|
<div class="w-full max-w-6xl">
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-5xl font-bold mb-4">{{ t("games.title") }}</h1>
|
|
<p class="text-xl text-base-content/70">{{ t("games.subtitle") }}</p>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="flex justify-center py-20">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
</div>
|
|
|
|
<p v-else-if="!games.length" class="text-center text-base-content/50 py-20">
|
|
{{ t("games.empty") }}
|
|
</p>
|
|
|
|
<div v-else class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<SteamStoreCard v-for="game in games" :key="game.id" :game="game" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|