Lucien Cartier-Tilet
37972aa660
- Add toast notifications for contact form success/error responses - Add toast notifications for backend errors in AppFooter - Add accessibility explanation for honeypot field - Add loading state to contact form submit button - Add i18n translations for toast messages (en/fr) - Fix honeypot input missing v-model binding
62 lines
1.7 KiB
Vue
62 lines
1.7 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>
|
|
<UButton
|
|
icon="i-simple-icons-github"
|
|
color="neutral"
|
|
variant="ghost"
|
|
to="https://github.com/Phundrak"
|
|
target="_blank"
|
|
aria-label="GitHub"
|
|
/>
|
|
</template>
|
|
</UFooter>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from '@nuxt/ui';
|
|
import { version } from '../../package.json';
|
|
|
|
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 items = computed<NavigationMenuItem[]>(() => [
|
|
{
|
|
label: $t('footer.links.source'),
|
|
to: 'https://labs.phundrak.com/phundrak/phundrak.com',
|
|
},
|
|
{
|
|
label: $t('footer.links.nuxt'),
|
|
to: 'https://nuxt.com/',
|
|
},
|
|
{
|
|
label: $t('footer.links.rust'),
|
|
to: 'https://rust-lang.org/',
|
|
},
|
|
]);
|
|
watch(error, (value) => {
|
|
if (value) {
|
|
toast.add({
|
|
title: $t('backend.errors.title'),
|
|
description: $t(value.message ?? 'backend.errors.unknown'),
|
|
color: 'error',
|
|
});
|
|
}
|
|
});
|
|
</script>
|