frontend: Create a box component to list mirrors

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/src/components/Box.vue b/frontend/src/components/Box.vue
new file mode 100644 (file)
index 0000000..f374c00
--- /dev/null
+++ b/frontend/src/components/Box.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+       const { title, subtitle } = defineProps(["title", "subtitle"])
+</script>
+
+<template>
+       <div class="box">
+               <h4 v-if="title" class="title is-4">
+                       {{ title }}
+               </h4>
+
+               <h6 v-if="subtitle" class="subtitle is-6">
+                       {{ subtitle }}
+               </h6>
+
+               <slot />
+       </div>
+</template>

diff --git a/frontend/src/views/MirrorsView.vue b/frontend/src/views/MirrorsView.vue
index 9c140d652e802d753dafe577a2dd3f264f399997..bb0e5ce1822d49c2a39d875734f49a72c4c99bc8 100644 (file)
--- a/frontend/src/views/MirrorsView.vue
+++ b/frontend/src/views/MirrorsView.vue
@@ -4,7 +4,8 @@
        import { fetchMirrors } from "@/api/mirrors";
 
        // Import UI components
-       import Section from "../components/Section.vue"
+       import Box from "@/components/Box.vue"
+       import Section from "@/components/Section.vue"
 
        // Mirrors
        const mirrors = ref<Mirror[]>([]);
@@ -21,18 +22,9 @@
 
 <template>
        <Section :title="$t('Mirrors')">
-               <Container>
-                       <div v-for="mirror in mirrors" class="box" :key="mirror.hostname">
-                               <h5 class="title is-5">
-                                       {{ mirror.hostname }}
-                               </h5>
-
-                               <h6 class="subtitle is-6">
-                                       <span v-if="mirror.owner">
-                                               {{ mirror.owner }}
-                                       </span>
-                               </h6>
-                       </div>
-               </Container>
+               <Box v-for="mirror in mirrors" :key="mirror.hostname"
+                               :title="mirror.hostname" :subtitle="mirror.owner">
+                       Some content
+               </Box>
        </Section>
 </template>