mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-17 18:21:10 +10:00
update to nuxt 4
This commit is contained in:
DecDuck
161
app/components/UserFooter.vue
Normal file
161
app/components/UserFooter.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<footer class="bg-zinc-950" aria-labelledby="footer-heading">
|
||||
<h2 id="footer-heading" class="sr-only">{{ $t("footer.footer") }}</h2>
|
||||
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
|
||||
<!-- Drop Info -->
|
||||
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
|
||||
<div class="space-y-8">
|
||||
<DropWordmark class="h-10" />
|
||||
<p class="text-sm leading-6 text-zinc-300">
|
||||
{{ $t("drop.desc") }}
|
||||
</p>
|
||||
|
||||
<LanguageSelector />
|
||||
|
||||
<div class="flex space-x-6">
|
||||
<NuxtLink
|
||||
v-for="item in navigation.social"
|
||||
:key="item.name"
|
||||
:to="item.href"
|
||||
target="_blank"
|
||||
class="text-zinc-400 hover:text-zinc-400"
|
||||
>
|
||||
<span class="sr-only">{{ item.name }}</span>
|
||||
<component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Foot links -->
|
||||
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("footer.games") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.games" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-10 md:mt-0">
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("userHeader.links.community") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.community" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("footer.documentation") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.documentation" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-10 md:mt-0">
|
||||
<h3 class="text-sm font-semibold leading-6 text-white">
|
||||
{{ $t("footer.about") }}
|
||||
</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li v-for="item in navigation.about" :key="item.name">
|
||||
<NuxtLink
|
||||
:to="item.href"
|
||||
class="text-sm leading-6 text-zinc-300 hover:text-white"
|
||||
>{{ item.name }}</NuxtLink
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center xl:col-span-3 mt-8">
|
||||
<NuxtLink
|
||||
:to="`https://github.com/Drop-OSS/drop/releases/tag/${versionInfo.version}`"
|
||||
class="text-xs text-zinc-700 hover:text-zinc-400 transition-colors duration-200 cursor-default select-none"
|
||||
>
|
||||
<i18n-t keypath="footer.version" tag="span" scope="global">
|
||||
<template #version>
|
||||
<span>{{ versionInfo.version }}</span>
|
||||
</template>
|
||||
<template #gitRef>
|
||||
<span>{{ versionInfo.gitRef }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconsDiscordLogo, IconsGithubLogo } from "#components";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const versionInfo = await $dropFetch("/api/v1");
|
||||
|
||||
const navigation = computed(() => ({
|
||||
games: [
|
||||
{ name: t("store.recentlyAdded"), href: "#" },
|
||||
{ name: t("store.recentlyReleased"), href: "#" },
|
||||
{ name: t("footer.topSellers"), href: "#" },
|
||||
{ name: t("footer.findGame"), href: "#" },
|
||||
],
|
||||
community: [
|
||||
{ name: t("common.friends"), href: "#" },
|
||||
{ name: t("common.groups"), href: "#" },
|
||||
{ name: t("common.servers"), href: "#" },
|
||||
],
|
||||
documentation: [
|
||||
// TODO: public API docs
|
||||
// { name: t("footer.api"), href: "https://api.droposs.org/" },
|
||||
{
|
||||
name: t("footer.docs.server"),
|
||||
href: "https://docs.droposs.org/docs/guides/quickstart",
|
||||
},
|
||||
{
|
||||
name: t("footer.docs.client"),
|
||||
href: "https://docs.droposs.org/docs/guides/client",
|
||||
},
|
||||
],
|
||||
about: [
|
||||
{ name: t("footer.aboutDrop"), href: "https://droposs.org/" },
|
||||
{ name: t("footer.comparison"), href: "https://droposs.org/comparison" },
|
||||
],
|
||||
social: [
|
||||
{
|
||||
name: t("footer.social.github"),
|
||||
href: "https://github.com/Drop-OSS",
|
||||
icon: IconsGithubLogo,
|
||||
},
|
||||
{
|
||||
name: t("footer.social.discord"),
|
||||
href: "https://discord.gg/NHx46XKJWA",
|
||||
icon: IconsDiscordLogo,
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
Reference in New Issue
Block a user