framit/app/components/AppFooter.vue

<template>
  <UFooter class="bg-background-200">
    <template #left>
      <div class="flex flex-col gap-2">
        <p class="text-text-800 text-sm">Copyright &copy; {{ 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>