frontend: Create some simple Home view

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..563799c
--- /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/components/Section.vue b/frontend/src/components/Section.vue
new file mode 100644 (file)
index 0000000..7e70e92
--- /dev/null
+++ b/frontend/src/components/Section.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+       const { title } = defineProps(["title"])
+</script>
+
+<template>
+       <section class="section">
+               <div class="container">
+                       <h1 v-if="title" class="title">{{ title }}</h1>
+
+                       <slot />
+               </div>
+       </section>
+</template>

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644 (file)
index 0000000..6227d54
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+       import Section from "../components/Section.vue"
+</script>
+
+<template>
+       <Section :title="$t('Welcome')">
+               <p>{{ $t("This is the front page") }}</p>
+       </Section>
+</template>