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 (file)
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 e1cde6b2d1a8058ce55bba01b62635b27581acd5..7bb81f195675c537fee358aad02b54b735303e49 100644 (file)
--- 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>