mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-09 20:12:10 +10:00
8363de2eed
* feat: small library tweaks + company page * feat: new store view * fix: ci merge error * feat: add genres to store page * feat: sorting * feat: lock game/version imports while their tasks are running * feat: feature games * feat: tag based filtering * fix: make tags alphabetical * refactor: move a bunch of i18n to common * feat: add localizations for everything * fix: title description on panel * fix: feature carousel text * fix: i18n footer strings * feat: add tag page * fix: develop merge * feat: offline games support (don't error out if provider throws) * feat: tag management * feat: show library next to game import + small fixes * feat: most of the company and tag managers * feat: company text field editing * fix: small fixes + tsgo experiemental * feat: upload icon and banner * feat: store infinite scrolling and bulk import mode * fix: lint * fix: add drop-base to prettier ignore
84 lines
2.5 KiB
Vue
84 lines
2.5 KiB
Vue
<template>
|
|
<div class="w-full flex flex-col overflow-x-hidden">
|
|
<!-- Hero section -->
|
|
<VueCarousel
|
|
v-if="recent.length > 0"
|
|
:wrap-around="true"
|
|
:items-to-show="1"
|
|
:autoplay="15 * 1000"
|
|
:transition="500"
|
|
:pause-autoplay-on-hover="true"
|
|
class="store-carousel"
|
|
>
|
|
<VueSlide v-for="game in recent" :key="game.id">
|
|
<div class="w-full h-full relative">
|
|
<div class="absolute inset-0">
|
|
<img
|
|
:src="useObject(game.mBannerObjectId)"
|
|
alt=""
|
|
class="size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="relative flex items-center justify-center w-full h-full bg-zinc-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
|
|
>
|
|
<div class="relative text-center">
|
|
<h3 class="text-base/7 font-semibold text-blue-300">
|
|
{{ $t("store.featured") }}
|
|
</h3>
|
|
<h2
|
|
class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
|
|
>
|
|
{{ game.mName }}
|
|
</h2>
|
|
<p
|
|
class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl mx-auto"
|
|
>
|
|
{{ game.mShortDescription }}
|
|
</p>
|
|
<div>
|
|
<div
|
|
class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto"
|
|
>
|
|
<NuxtLink
|
|
:href="`/store/${game.id}`"
|
|
class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
|
|
>{{ $t("store.lookAt") }}</NuxtLink
|
|
>
|
|
<AddLibraryButton :game-id="game.id" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</VueSlide>
|
|
|
|
<template #addons>
|
|
<CarouselPagination class="py-2" :items="recent" />
|
|
</template>
|
|
</VueCarousel>
|
|
<div
|
|
v-else
|
|
class="w-full h-full flex items-center justify-center bg-zinc-950/50 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
|
|
>
|
|
<h2
|
|
class="uppercase text-xl font-bold tracking-tight text-zinc-700 sm:text-3xl"
|
|
>
|
|
{{ $t("store.noGame") }}
|
|
</h2>
|
|
</div>
|
|
|
|
<StoreView />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const recent = await $dropFetch("/api/v1/store/featured");
|
|
|
|
const { t } = useI18n();
|
|
|
|
useHead({
|
|
title: t("store.title"),
|
|
});
|
|
</script>
|