Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-20 19:51:09 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: commit prototype

Browse Source
This commit is contained in:
DecDuck
2025-06-09 13:52:42 +10:00
parent 60abc03091
commit b487ed4346
25 changed files with 506 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
pages/store/index.vue
View File

@ -1,115 +1,18 @@
<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.recentlyAdded") }}
</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">
{{ 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>
<StoreBigCarousel :source="{ name: 'newlyAdded' }" title="Newly added" />
<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>
<!-- new releases -->
<div class="px-4 sm:px-12 py-4">
<h1 class="text-zinc-100 text-2xl font-bold font-display">
{{ $t("store.recentlyReleased") }}
</h1>
<NuxtLink class="text-blue-600 font-semibold">
<i18n-t keypath="store.exploreMore" tag="span" scope="global">
<template #arrow>
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
</template>
</i18n-t>
</NuxtLink>
<div class="mt-4">
<GameCarousel :items="released" :min="12" />
</div>
</div>
<!-- recently updated -->
<div class="px-4 sm:px-12 py-4" hydrate-on-visible>
<h1 class="text-zinc-100 text-2xl font-bold font-display">
{{ $t("store.recentlyUpdated") }}
</h1>
<NuxtLink class="text-blue-600 font-semibold">
<i18n-t keypath="store.exploreMore" tag="span" scope="global">
<template #arrow>
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
</template>
</i18n-t>
</NuxtLink>
<div class="mt-4">
<GameCarousel :items="updated" :min="12" />
</div>
</div>
<StoreSmallBento :source="{ name: 'companies' }" title="Find by company" />
<StoreSmallCarousel
:source="{ name: 'newlyReleased' }"
title="Newly released"
/>
<StoreSmallFocused :source="{ name: 'featured' }" title="Featured" />
</div>
</template>
<script setup lang="ts">
const recent = await $dropFetch("/api/v1/store/recent");
const updated = await $dropFetch("/api/v1/store/updated");
const released = await $dropFetch("/api/v1/store/released");
// const developers = await $dropFetch("/api/v1/store/developers");
// const publishers = await $dropFetch("/api/v1/store/publishers");
const { t } = useI18n();
useHead({