Footer links

resources/js/pages/Home.vue

@@ -1,17 +1,81 @@
 <script lang="ts" setup>
 import { Head } from '@inertiajs/vue3';
+import { onMounted, ref } from 'vue';
 import HelpText from '@/components/HelpText.vue';
 import LinkHeader from '@/components/LinkHeader.vue';
+
+const icons = {
+    'matthiasgdev.png': {
+        href: 'https://abcd.matthiasg.dev/q/portfolio',
+        alt: 'Portfolio',
+    },
+    'gitea.png': {
+        href: 'https://git.matthiasg.dev/Ninluc/perceptron-viewer',
+        alt: 'Dépôt Git',
+    },
+};
+const iconsFolder: string = '/img/footerIcons/';
+const iconHtml = ref<Record<string, string>>({});
+
+onMounted(async () => {
+    try {
+        const svgEntries = await Promise.all(
+            Object.keys(icons)
+                .filter((icon) => icon.endsWith('.svg'))
+                .map(async (icon) => {
+                    const response = await fetch(`${iconsFolder}${icon}`);
+
+                    if (!response.ok) {
+                        throw new Error(`Failed to load ${icon}`);
+                    }
+
+                    return [icon, await response.text()] as const;
+                }),
+        );
+
+        iconHtml.value = Object.fromEntries(svgEntries);
+    } catch (error) {
+        console.error('Could not load footer icons:', error);
+    }
+});
 </script>
 
 <template>
     <Head title="Perceptron Viewer"></Head>
     <main class="flex min-h-dvh flex-col gap-6 pb-6">
         <LinkHeader class="w-full my-0! py-6 sticky top-0 z-10 bg-background" />
+
         <div
             class="flex flex-col items-center gap-6 rounded-lg p-6 shadow sm:p-8"
         >
             <HelpText markdownFileName="intro" class="max-w-[90ch]" />
         </div>
+
+        <hr />
+
+        <footer class="p-10 flex flex-col gap-6">
+            <p class="text-center text-muted-foreground">
+                Autres liens :
+            </p>
+
+            <div class="flex flex-wrap justify-center align-center gap-10">
+                <a
+                    v-for="(iconData, icon) in icons"
+                    :key="icon"
+                    :href="iconData.href"
+                    :aria-label="iconData.alt"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="min-h-full flex flex-col  justify-between items-center gap-2 transition hover:scale-110"
+                >
+                    <img
+                        :src="iconsFolder + icon"
+                        :alt="iconData.alt"
+                        class="contain-size w-20 transition brightness-200 hover:brightness-100 hover:saturate-100 hover:opacity-70"
+                    />
+                    <p>{{ iconData.alt }}</p>
+                </a>
+            </div>
+        </footer>
     </main>
 </template>