62 lines
2.5 KiB
Vue
62 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
useHead({ title: 'huaqo.de' })
|
|
|
|
const { hub, hubServices } = useAppConfig()
|
|
|
|
const apps = computed(() => Object.values(hub as Record<string, HubApp>).sort((a, b) => a.title.localeCompare(b.title, 'de')))
|
|
</script>
|
|
|
|
<template>
|
|
<UMain>
|
|
<UContainer class="max-w-3xl py-8">
|
|
<div class="mb-6 flex items-center justify-between gap-3">
|
|
<h1 class="text-2xl font-semibold text-highlighted">
|
|
huaqo.de
|
|
</h1>
|
|
<AppHeaderActions :hub-link="false" />
|
|
</div>
|
|
|
|
<ul class="grid gap-3 sm:grid-cols-2">
|
|
<li v-for="app in apps" :key="app.to">
|
|
<NuxtLink
|
|
:to="app.to"
|
|
class="group flex h-full items-center gap-4 rounded-lg border border-default p-4 transition-colors hover:border-primary hover:bg-elevated/50 focus-visible:outline-2 focus-visible:outline-primary"
|
|
>
|
|
<span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
|
|
<UIcon :name="app.icon" class="size-5" />
|
|
</span>
|
|
<span class="flex min-w-0 items-center gap-1.5 font-medium text-highlighted">
|
|
{{ app.title }}
|
|
<UIcon v-if="app.locked" name="i-lucide-lock" class="size-3.5 text-muted" aria-label="Passwortgeschützt" />
|
|
</span>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
|
|
<template v-if="hubServices.length">
|
|
<h2 class="mt-10 mb-3 text-sm font-medium text-muted">
|
|
Dienste
|
|
</h2>
|
|
<ul class="grid gap-3 sm:grid-cols-2">
|
|
<li v-for="service in hubServices" :key="service.href">
|
|
<a
|
|
:href="service.href"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="group flex h-full items-center gap-4 rounded-lg border border-default p-4 transition-colors hover:border-primary hover:bg-elevated/50 focus-visible:outline-2 focus-visible:outline-primary"
|
|
>
|
|
<span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
|
|
<UIcon :name="service.icon" class="size-5" />
|
|
</span>
|
|
<span class="flex min-w-0 items-center gap-1.5 font-medium text-highlighted">
|
|
{{ service.title }}
|
|
<UIcon name="i-lucide-external-link" class="size-3.5 text-muted" aria-label="Öffnet in neuem Tab" />
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</UContainer>
|
|
</UMain>
|
|
</template>
|