79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<template>
|
|
<UFooter class="bg-background-200">
|
|
<template #left>
|
|
<div class="flex flex-col gap-2">
|
|
<p class="text-text-800 text-sm">Copyright © {{ new Date().getFullYear() }}</p>
|
|
<p class="text-text-800 text-sm">{{ $t('footer.versions.frontend') }}: {{ version }}</p>
|
|
<p class="text-text-800 text-sm">{{ $t('footer.versions.backend') }}: {{ backendVersion }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<UNavigationMenu :items="items" variant="link" :orientation="orientation" />
|
|
|
|
<template #right>
|
|
<FooterSocialAccount
|
|
v-for="social in socialAccounts"
|
|
:key="social.label"
|
|
:icon="social.icon"
|
|
:link="social.link"
|
|
:label="social.label"
|
|
/>
|
|
</template>
|
|
</UFooter>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from '@nuxt/ui';
|
|
import { version } from '../../package.json';
|
|
import type { SocialAccount } from '~/types/social-account';
|
|
|
|
const toast = useToast();
|
|
const { isMobile } = useDevice();
|
|
const orientation = computed(() => (isMobile ? 'vertical' : 'horizontal'));
|
|
const { getMeta } = useBackend();
|
|
const { data, error, loading } = getMeta();
|
|
const backendVersion = computed(() =>
|
|
loading.value ? 'backend.loading' : data?.value?.version || $t('backend.failed'),
|
|
);
|
|
|
|
const socialAccounts: SocialAccount[] = [
|
|
{ icon: 'i-simple-icons-mastodon', label: 'Fediverse', link: 'https://social.phundrak.com/phundrak' },
|
|
{ icon: 'i-simple-icons-gitea', label: 'Gitea', link: 'https://labs.phundrak.com/phundrak' },
|
|
{ icon: 'i-simple-icons-github', label: 'GitHub', link: 'https://github.com/Phundrak' },
|
|
{ icon: 'i-simple-icons-youtube', label: 'YouTube', link: 'https://youtube.com/@phundrak' },
|
|
];
|
|
|
|
const items = computed<NavigationMenuItem[]>(() => [
|
|
{
|
|
label: $t('footer.links.source.backend'),
|
|
to: 'https://labs.phundrak.com/phundrak/bakit',
|
|
target: '_blank',
|
|
},
|
|
{
|
|
label: $t('footer.links.source.frontend'),
|
|
to: 'https://labs.phundrak.com/phundrak/framit',
|
|
target: '_blank',
|
|
},
|
|
{
|
|
label: $t('footer.links.nuxt'),
|
|
to: 'https://nuxt.com/',
|
|
target: '_blank',
|
|
},
|
|
{
|
|
label: $t('footer.links.rust'),
|
|
to: 'https://rust-lang.org/',
|
|
target: '_blank',
|
|
},
|
|
]);
|
|
|
|
watch(error, (value) => {
|
|
if (value) {
|
|
toast.add({
|
|
title: $t('backend.errors.title'),
|
|
description: $t(value.message ?? 'backend.errors.unknown'),
|
|
color: 'error',
|
|
});
|
|
}
|
|
});
|
|
</script>
|