mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-09 20:12:10 +10:00
feat: partial work on home admin page
This commit is contained in:
DecDuck
@ -31,7 +31,7 @@
|
||||
<li v-for="game in filteredLibrary" :key="game.id" class="flex">
|
||||
<NuxtLink
|
||||
:to="`/library/game/${game.id}`"
|
||||
class="flex flex-row items-center w-full p-1.5 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5 active:scale-[0.98]"
|
||||
class="flex flex-row items-center w-full p-1.5 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
|
||||
>
|
||||
<img
|
||||
:src="useObject(game.mCoverId)"
|
||||
|
||||
@ -78,14 +78,14 @@ const navigation = {
|
||||
{ name: 'Servers', href: '#' },
|
||||
],
|
||||
documentation: [
|
||||
{ name: 'API', href: '#' },
|
||||
{ name: 'Server Docs', href: '#' },
|
||||
{ name: 'Client Docs', href: '#' },
|
||||
{ name: 'API', href: 'https://api.droposs.org/' },
|
||||
{ name: 'Server Docs', href: 'https://wiki.droposs.org/guides/quickstart.html' },
|
||||
{ name: 'Client Docs', href: 'https://wiki.droposs.org/guides/client.html' },
|
||||
],
|
||||
about: [
|
||||
{ name: 'About Drop', href: '#' },
|
||||
{ name: 'Features', href: '#' },
|
||||
{ name: 'FAQ', href: '#' },
|
||||
{ name: 'About Drop', href: 'https://droposs.org/' },
|
||||
{ name: 'Features', href: 'https://droposs.org/features' },
|
||||
{ name: 'FAQ', href: 'https://droposs.org/faq' },
|
||||
],
|
||||
social: [
|
||||
{
|
||||
|
||||
@ -119,18 +119,6 @@
|
||||
<span class="text-xs text-center">{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
href="/"
|
||||
class="text-zinc-400 hover:bg-zinc-900 hover:text-white transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6"
|
||||
>
|
||||
<ArrowLeftIcon
|
||||
class="h-6 w-6 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="text-xs text-center">Back</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -178,7 +166,7 @@ import {
|
||||
LockClosedIcon,
|
||||
Cog6ToothIcon,
|
||||
FlagIcon,
|
||||
BellIcon
|
||||
BellIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import type { NavigationItem } from "~/composables/types";
|
||||
import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
|
||||
@ -205,6 +193,12 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
|
||||
prefix: "/admin/settings",
|
||||
icon: Cog6ToothIcon,
|
||||
},
|
||||
{
|
||||
label: "Back",
|
||||
route: "/",
|
||||
prefix: ".",
|
||||
icon: ArrowLeftIcon,
|
||||
},
|
||||
];
|
||||
|
||||
const notifications = useNotifications();
|
||||
|
||||
@ -1,6 +1,189 @@
|
||||
<template></template>
|
||||
<template>
|
||||
<div class="grid gap-4 lg:grid-cols-3 lg:grid-rows-2">
|
||||
<div class="relative lg:row-span-2">
|
||||
<div
|
||||
class="absolute inset-px rounded-lg bg-zinc-950 lg:rounded-l-[2rem]"
|
||||
/>
|
||||
<div
|
||||
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]"
|
||||
>
|
||||
<div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
|
||||
<p
|
||||
class="mt-2 text-lg font-medium tracking-tight text-zinc-100 max-lg:text-center"
|
||||
>
|
||||
Library
|
||||
</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-zinc-400 max-lg:text-center">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
|
||||
lorem cupidatat commodo.
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="libraryState.unimportedGames.length > 0"
|
||||
class="mt-2 rounded-md bg-blue-600/10 p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<InformationCircleIcon
|
||||
class="h-5 w-5 text-blue-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p class="text-sm text-blue-400">
|
||||
Drop has detected you have new games to import.
|
||||
</p>
|
||||
<p class="mt-3 text-sm md:ml-6 md:mt-0">
|
||||
<NuxtLink
|
||||
href="/admin/library/import"
|
||||
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
|
||||
>
|
||||
Import
|
||||
<span aria-hidden="true"> →</span>
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dl
|
||||
class="mt-4 grid max-w-xl grid-cols-1 gap-8 sm:grid-cols-2 xl:mt-8"
|
||||
>
|
||||
<div class="flex flex-col gap-y-3 border-l border-zinc-100/10 pl-6">
|
||||
<dt class="text-sm/6 text-zinc-400">Games</dt>
|
||||
<dd
|
||||
class="order-first text-3xl font-semibold tracking-tight text-zinc-100"
|
||||
>
|
||||
{{ libraryState.games.length }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-3 border-l border-zinc-100/10 pl-6">
|
||||
<dt class="text-sm/6 text-zinc-400">Versions</dt>
|
||||
<dd
|
||||
class="order-first text-3xl font-semibold tracking-tight text-zinc-100"
|
||||
>
|
||||
{{
|
||||
libraryState.games
|
||||
.map((e) => e.game.versions.length)
|
||||
.reduce((a, b) => a + b, 0)
|
||||
}}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-l-[2rem]"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative max-lg:row-start-1">
|
||||
<div
|
||||
class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"
|
||||
/>
|
||||
<div
|
||||
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"
|
||||
>
|
||||
<div class="px-8 pt-8 sm:px-10 sm:pt-10">
|
||||
<p
|
||||
class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center"
|
||||
>
|
||||
Performance
|
||||
</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit maiores
|
||||
impedit.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2"
|
||||
>
|
||||
<img
|
||||
class="w-full max-lg:max-w-xs"
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-performance.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-t-[2rem]"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
|
||||
<div class="absolute inset-px rounded-lg bg-white" />
|
||||
<div
|
||||
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]"
|
||||
>
|
||||
<div class="px-8 pt-8 sm:px-10 sm:pt-10">
|
||||
<p
|
||||
class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center"
|
||||
>
|
||||
Security
|
||||
</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
|
||||
Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse
|
||||
semper morbi.
|
||||
</p>
|
||||
</div>
|
||||
<div class="@container flex flex-1 items-center max-lg:py-6 lg:pb-2">
|
||||
<img
|
||||
class="h-[min(152px,40cqw)] object-cover"
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-security.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative lg:row-span-2">
|
||||
<div
|
||||
class="absolute inset-px rounded-lg bg-white max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"
|
||||
/>
|
||||
<div
|
||||
class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]"
|
||||
>
|
||||
<div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
|
||||
<p
|
||||
class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center"
|
||||
>
|
||||
Powerful APIs
|
||||
</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
|
||||
Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget
|
||||
sem sodales gravida.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative min-h-[30rem] w-full grow">
|
||||
<div
|
||||
class="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900 shadow-2xl"
|
||||
>
|
||||
<div class="flex bg-gray-800/40 ring-1 ring-white/5">
|
||||
<div class="-mb-px flex text-sm/6 font-medium text-gray-400">
|
||||
<div
|
||||
class="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white"
|
||||
>
|
||||
NotificationSetting.jsx
|
||||
</div>
|
||||
<div class="border-r border-gray-600/10 px-4 py-2">App.jsx</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 pt-6 pb-14">
|
||||
<!-- Your code example -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { InformationCircleIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
@ -8,4 +191,7 @@ definePageMeta({
|
||||
useHead({
|
||||
title: "Home",
|
||||
});
|
||||
|
||||
const headers = useRequestHeaders(["cookie"]);
|
||||
const libraryState = await $fetch("/api/v1/admin/library", { headers });
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user