Shuunen/folio

<script setup lang="ts">
import { $t, switchLang } from '../utils/translate.utils'
</script>

<template>
  <div class="app-footer mt-24 flex h-24 flex-col justify-center gap-2 bg-contain bg-center bg-no-repeat pb-12">
    <div class="flex justify-center space-x-6">
      <a class="app-link" href="https://www.linkedin.com/in/romain-racamier" rel="noopener noreferrer" target="_blank">
        <span class="sr-only">LinkedIn</span>
        <svg class="size-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z" />
          <circle cx="4" cy="4" r="2" />
        </svg>
      </a>
      <a class="app-link" href="https://github.com/Shuunen" rel="noopener noreferrer" target="_blank">
        <span class="sr-only">GitHub</span>
        <svg aria-hidden="true" class="size-6" fill="currentColor" viewBox="0 0 24 24">
          <path clip-rule="evenodd"
            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
            fill-rule="evenodd"></path>
        </svg>
      </a>
    </div>
    <button class="mx-auto mt-1 font-mono text-sm underline underline-offset-4 hover:font-bold hover:underline-offset-2" type="button"
      @click="switchLang">
      {{ $t('general.switch-lang') }}
    </button>
    <div class="text-center text-sm font-bold text-primary-400" title="__unique-mark__">© {{ new Date().getFullYear() }} Romain.cloud - {{
      $t('general.copyright') }}</div>
  </div>
</template>

<style scoped>
.app-footer {
  background-image: url('/assets/textures/oooscillate-2.svg');
}
</style>