mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-14 00:31:25 +10:00
feat(store): new endpoints, ui and beginnings of main store page
This commit is contained in:
DecDuck
@ -43,14 +43,16 @@
|
||||
>
|
||||
<div class="flex min-w-0 gap-x-4">
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="text-sm/6 font-semibold text-zinc-100">
|
||||
|
||||
<span v-if="invitationUrls">
|
||||
<div class="text-sm/6 font-semibold text-zinc-100">
|
||||
<p v-if="invitationUrls">
|
||||
{{ invitationUrls[invitationIdx] }}
|
||||
</span>
|
||||
<div v-else class="h-4 w-full bg-zinc-800 animate-pulse rounded" />
|
||||
</p>
|
||||
<div
|
||||
v-else
|
||||
class="h-4 w-full bg-zinc-800 animate-pulse rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p class="mt-1 flex text-xs/5 text-gray-500">
|
||||
{{ invitation.username ?? "No username enforced." }}
|
||||
|
|
||||
@ -126,8 +128,8 @@
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-base font-semibold text-zinc-100"
|
||||
>Invite user to Drop</DialogTitle
|
||||
>
|
||||
>Invite user to Drop
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Drop will generate a URL that you can send to the
|
||||
@ -203,8 +205,8 @@
|
||||
as="span"
|
||||
class="text-sm/6 font-medium text-zinc-100"
|
||||
passive
|
||||
>Admin invitation</SwitchLabel
|
||||
>
|
||||
>Admin invitation
|
||||
</SwitchLabel>
|
||||
<SwitchDescription
|
||||
as="span"
|
||||
class="text-sm text-zinc-400"
|
||||
@ -391,11 +393,11 @@ useHead({
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const invitations = ref(
|
||||
await $fetch<Array<SerializeObject<Invitation>>>("/api/v1/admin/auth/invitation", {
|
||||
headers,
|
||||
})
|
||||
const { data } = await useFetch<Array<SerializeObject<Invitation>>>(
|
||||
"/api/v1/admin/auth/invitation",
|
||||
{ headers }
|
||||
);
|
||||
const invitations = ref(data.value ?? []);
|
||||
|
||||
const generateInvitationUrl = (id: string) =>
|
||||
`${window.location.protocol}//${window.location.host}/register?id=${id}`;
|
||||
|
||||
@ -18,5 +18,5 @@ useHead({
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const games = await $fetch("/api/v1/games/front", { headers });
|
||||
const games = await $fetch("/api/v1/store/recent", { headers });
|
||||
</script>
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
|
||||
<template #addons>
|
||||
<VueNavigation />
|
||||
<VuePagination />
|
||||
<CarouselPagination class="py-2 px-12" />
|
||||
</template>
|
||||
</VueCarousel>
|
||||
</div>
|
||||
@ -115,19 +115,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.carousel__icon {
|
||||
color: #f4f4f5;
|
||||
}
|
||||
.carousel__pagination-button::after {
|
||||
background-color: #3f3f46;
|
||||
border-radius: 999999px;
|
||||
}
|
||||
.carousel__pagination-button--active::after {
|
||||
background-color: #a1a1aa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PlusIcon } from "@heroicons/vue/20/solid";
|
||||
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
@ -1,3 +1,140 @@
|
||||
<!--
|
||||
This example requires some changes to your config:
|
||||
|
||||
```
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
// ...
|
||||
require('@tailwindcss/forms'),
|
||||
],
|
||||
}
|
||||
```
|
||||
-->
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<div class="w-full">
|
||||
<!-- Hero section -->
|
||||
<VueCarousel
|
||||
:wrapAround="true"
|
||||
:items-to-show="1"
|
||||
:autoplay="15 * 1000"
|
||||
:transition="500"
|
||||
:pauseAutoplayOnHover="true"
|
||||
>
|
||||
<VueSlide v-for="game in recent" :key="game.id">
|
||||
<div class="w-full h-full relative overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
:src="useObject(game.mBannerId)"
|
||||
alt=""
|
||||
class="size-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="relative w-full h-full bg-gray-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
|
||||
>
|
||||
<div
|
||||
class="relative mx-auto flex max-w-xl flex-col items-center text-center"
|
||||
>
|
||||
<h3 class="text-base/7 font-semibold text-blue-300">
|
||||
Newly added
|
||||
</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">
|
||||
{{ game.mShortDescription }}
|
||||
</p>
|
||||
<NuxtLink
|
||||
:href="`/store/${game.id}`"
|
||||
class="mt-8 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"
|
||||
>Check it out</NuxtLink
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VueSlide>
|
||||
|
||||
<template #addons>
|
||||
<CarouselPagination class="py-2" :items="recent"/>
|
||||
</template>
|
||||
</VueCarousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const { data: recent } = await useFetch("/api/v1/store/recent", { headers });
|
||||
|
||||
useHead({
|
||||
title: "Store",
|
||||
});
|
||||
|
||||
const categories = [
|
||||
{
|
||||
name: "New Arrivals",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-01.jpg",
|
||||
},
|
||||
{
|
||||
name: "Productivity",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-02.jpg",
|
||||
},
|
||||
{
|
||||
name: "Workspace",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-04.jpg",
|
||||
},
|
||||
{
|
||||
name: "Accessories",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-05.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sale",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-03.jpg",
|
||||
},
|
||||
];
|
||||
const collections = [
|
||||
{
|
||||
name: "Handcrafted Collection",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-01.jpg",
|
||||
imageAlt:
|
||||
"Brown leather key ring with brass metal loops and rivets on wood table.",
|
||||
description:
|
||||
"Keep your phone, keys, and wallet together, so you can lose everything at once.",
|
||||
},
|
||||
{
|
||||
name: "Organized Desk Collection",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-02.jpg",
|
||||
imageAlt:
|
||||
"Natural leather mouse pad on white desk next to porcelain mug and keyboard.",
|
||||
description:
|
||||
"The rest of the house will still be a mess, but your desk will look great.",
|
||||
},
|
||||
{
|
||||
name: "Focus Collection",
|
||||
href: "#",
|
||||
imageSrc:
|
||||
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-03.jpg",
|
||||
imageAlt:
|
||||
"Person placing task list card into walnut card holder next to felt carrying case on leather desk pad.",
|
||||
description:
|
||||
"Be more productive than enterprise project managers with a single piece of paper.",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user