From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sat, 10 May 2025 15:12:28 +0000 (+0000)
Subject: frontend: Add a simple notification component
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;ds=inline;p=people%2Fms%2Fwestferry.git

frontend: Add a simple notification component

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

diff --git a/frontend/src/components/Notification.vue b/frontend/src/components/Notification.vue
new file mode 100644
index 0000000..817feb5
--- /dev/null
+++ b/frontend/src/components/Notification.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+	import { ref } from "vue";
+
+	defineProps<{
+		title?: string,
+		isClosable?: boolean,
+	}>()
+
+	// Should this notification be shown?
+	const show = ref(true);
+</script>
+
+<template>
+	<div class="notification" v-if="show">
+		<button v-if="isClosable" class="delete" @click="show = false"></button>
+
+		<!-- Title -->
+		<p v-if="title">
+			<strong>{{ title }}</strong>
+		</p>
+
+		<!-- Content -->
+		<slot />
+	</div>
+</template>
diff --git a/frontend/src/views/DemoView.vue b/frontend/src/views/DemoView.vue
index e1cde6b..7bb81f1 100644
--- a/frontend/src/views/DemoView.vue
+++ b/frontend/src/views/DemoView.vue
@@ -3,6 +3,7 @@
 -->
 
 <script setup lang="ts">
+	import Notification from "../components/Notification.vue"
 	import Section from "../components/Section.vue"
 </script>
 
@@ -10,4 +11,18 @@
 	<Section :title="$t('This Is A Section')">
 		<p>{{ $t("The section can have any content...") }}</p>
 	</Section>
+
+	<Section :title="$t('Notifications')">
+		<Notification>
+			{{ $t("This is a regular notification.") }}
+		</Notification>
+
+		<Notification :title="$t('Title')">
+			{{ $t("This notification has a title.") }}
+		</Notification>
+
+		<Notification is-closable>
+			{{ $t("This notification can be closed.") }}
+		</Notification>
+	</Section>
 </template>