some frontend

2026-09-26 23:10:14 +02:00
parent 52c069aca4
commit b2563f9146
8 changed files with 82 additions and 22 deletions
@@ -0,0 +1,49 @@
+<script setup>
+import {ref} from 'vue';
+
+const props = defineProps({
+    href: {
+        type: String,
+        default: '/',
+    },
+    icon: String,
+    icon_before: {
+        type: Boolean,
+        default: false,
+    },
+    text_on_hover: {
+        type: Boolean,
+        default: false,
+    }
+});
+const hover = ref(0);
+</script>
+
+<template>
+    <div class="flex-container" @mouseover="hover = true" @mouseleave="hover = false">
+        <img :src="icon" v-if="icon_before && icon != null">
+        <a :href="href">
+            <div :hidden="text_on_hover && !hover">
+                <slot></slot>
+            </div>
+        </a>
+        <img :src="icon" v-if="!icon_before && icon != null">
+    </div>
+</template>
+
+<style scoped>
+.flex-container {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+a {
+    font-size: 2.5vh;
+    margin: 10px;
+}
+img {
+    display: inline-block;
+    height: 1.8em;
+    position: relative;
+}
+</style>