yindo/drop
1
0
Fork 0
mirror of https://github.com/BillyOutlast/drop.git synced 2026-02-04 08:41:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

another stage of client authentication

Browse Source
This commit is contained in:
DecDuck
2024-10-08 16:13:46 +11:00
parent 909432a6ce
commit 7523e536b5
10 changed files with 345 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/UserFooter.vue
View File

@@ -1,15 +1,15 @@
<template>
<footer class="bg-gray-950" aria-labelledby="footer-heading">
<footer class="bg-zinc-950" aria-labelledby="footer-heading">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 ">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8">
<Wordmark class="h-10" />
<p class="text-sm leading-6 text-gray-300">An open-source game distribution platform built for
<p class="text-sm leading-6 text-zinc-300">An open-source game distribution platform built for
speed, flexibility and beauty.</p>
<div class="flex space-x-6">
<a v-for="item in navigation.social" :key="item.name" :href="item.href" target="_blank"
class="text-gray-500 hover:text-gray-400">
class="text-zinc-500 hover:text-zinc-400">
<span class="sr-only">{{ item.name }}</span>
<component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
</a>
@@ -21,7 +21,7 @@
<h3 class="text-sm font-semibold leading-6 text-white">Games</h3>
<ul role="list" class="mt-6 space-y-4">
<li v-for="item in navigation.games" :key="item.name">
<a :href="item.href" class="text-sm leading-6 text-gray-300 hover:text-white">{{
<a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
item.name }}</a>
</li>
</ul>
@@ -30,7 +30,7 @@
<h3 class="text-sm font-semibold leading-6 text-white">Community</h3>
<ul role="list" class="mt-6 space-y-4">
<li v-for="item in navigation.community" :key="item.name">
<a :href="item.href" class="text-sm leading-6 text-gray-300 hover:text-white">{{
<a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
item.name }}</a>
</li>
</ul>
@@ -41,7 +41,7 @@
<h3 class="text-sm font-semibold leading-6 text-white">Documentation</h3>
<ul role="list" class="mt-6 space-y-4">
<li v-for="item in navigation.documentation" :key="item.name">
<a :href="item.href" class="text-sm leading-6 text-gray-300 hover:text-white">{{
<a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
item.name }}</a>
</li>
</ul>
@@ -50,7 +50,7 @@
<h3 class="text-sm font-semibold leading-6 text-white">About</h3>
<ul role="list" class="mt-6 space-y-4">
<li v-for="item in navigation.about" :key="item.name">
<a :href="item.href" class="text-sm leading-6 text-gray-300 hover:text-white">{{
<a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
item.name }}</a>
</li>
</ul>

120
components/UserHeader.vue
View File

@@ -1,66 +1,72 @@
<template>
<div class="bg-gray-950 flex flex-row px-48 py-5">
<div class="grow inline-flex items-center gap-x-20">
<Wordmark class="h-8" />
<nav class="inline-flex items-center">
<ol class="inline-flex items-center gap-x-12">
<li class="transition text-gray-300 hover:text-gray-100 uppercase font-display font-semibold text-md"
v-for="(nav, navIdx) in navigation">
{{ nav.label }}
</li>
</ol>
</nav>
</div>
<div class="inline-flex items-center">
<ol class="inline-flex gap-3">
<li v-for="(item, itemIdx) in quickActions">
<HeaderWidget @click="item.action" :notifications="item.notifications">
<component class="h-5" :is="item.icon" />
</HeaderWidget>
</li>
<HeaderUserWidget />
</ol>
</div>
<div class="hidden lg:flex bg-zinc-950 flex-row px-12 xl:px-48 py-5">
<div class="grow inline-flex items-center gap-x-20">
<NuxtLink to="/">
<Wordmark class="h-8" />
</NuxtLink>
<nav class="inline-flex items-center">
<ol class="inline-flex items-center gap-x-12">
<li
class="transition text-zinc-300 hover:text-zinc-100 uppercase font-display font-semibold text-md"
v-for="(nav, navIdx) in navigation"
>
{{ nav.label }}
</li>
</ol>
</nav>
</div>
<div class="inline-flex items-center">
<ol class="inline-flex gap-3">
<li v-for="(item, itemIdx) in quickActions">
<HeaderWidget
@click="item.action"
:notifications="item.notifications"
>
<component class="h-5" :is="item.icon" />
</HeaderWidget>
</li>
<HeaderUserWidget />
</ol>
</div>
</div>
</template>
<script setup lang="ts">
import { BellIcon, UserGroupIcon } from '@heroicons/vue/16/solid';
import type { NavigationItem, QuickActionNav } from '../composables/types';
import HeaderWidget from './HeaderWidget.vue';
import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
import type { NavigationItem, QuickActionNav } from "../composables/types";
import HeaderWidget from "./HeaderWidget.vue";
const navigation: Array<NavigationItem> = [
{
prefix: '/store',
route: '/store',
label: "Store"
},
{
prefix: "/library",
route: "/library",
label: "Library"
},
{
prefix: "/community",
route: "/community",
label: "Community"
},
{
prefix: "/news",
route: "/news",
label: "News"
}
]
{
prefix: "/store",
route: "/store",
label: "Store",
},
{
prefix: "/library",
route: "/library",
label: "Library",
},
{
prefix: "/community",
route: "/community",
label: "Community",
},
{
prefix: "/news",
route: "/news",
label: "News",
},
];
const quickActions: Array<QuickActionNav> = [
{
icon: UserGroupIcon,
action: async () => { }
},
{
icon: BellIcon,
action: async () => { }
}
]
</script>
{
icon: UserGroupIcon,
action: async () => {},
},
{
icon: BellIcon,
action: async () => {},
},
];
</script>