From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 3 Jul 2025 10:31:11 +0000 (+0000)
Subject: frontend: Create a box component to list mirrors
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4e590a274c54d8d321d8da2d531d610c582ef5dd;p=pbs.git

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
index 00000000..f374c009
--- /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 9c140d65..bb0e5ce1 100644
--- 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>