From 75d2fec8f7bc3f8bc530894b52872d0fb3326774 Mon Sep 17 00:00:00 2001
From: Elihuso Quigley <Elihuso@outlook.com>
Date: Sun, 14 Jul 2024 22:22:58 +0800
Subject: [PATCH] [R] Refactor Banner

---
 src/components.d.ts       |  1 +
 src/components/Banner.vue | 90 +++++++++++++++++++++++++++++++++++++++
 src/components/MDX.vue    |  3 +-
 src/logic/data.ts         |  6 +++
 4 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Banner.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 7c7fcb966..c34f08ad0 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     BackupButtons: typeof import('./components/buttons/BackupButtons.vue')['default']
     Balloon: typeof import('./components/Balloon.vue')['default']
+    Banner: typeof import('./components/Banner.vue')['default']
     BirthdayButton: typeof import('./components/buttons/BirthdayButton.vue')['default']
     ChannelBackupButton: typeof import('./components/buttons/ChannelBackupButton.vue')['default']
     Divider: typeof import('./components/divider.vue')['default']
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
new file mode 100644
index 000000000..f36ec6384
--- /dev/null
+++ b/src/components/Banner.vue
@@ -0,0 +1,90 @@
+<script lang="ts">
+import {BannerData} from "@/logic/data";
+import {Component, Prop, Vue} from 'vue-facing-decorator';
+
+@Component({})
+export default class Banner extends Vue {
+    @Prop({ required: true }) data!: BannerData
+}
+</script>
+
+<template>
+    <div
+        class="banner">
+        <div class="img-container">
+            <img :src="data.icon"/>
+        </div>
+        <div class="content">
+            <h3 v-text="data.title"/>
+            <p v-text="data.text"></p>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+@import "@/css/colors";
+
+.banner {
+    width: 90%;
+    margin: 10px auto;
+    min-height: 100px;
+    display: block;
+    background: $color-bg-5;
+    border-radius: 30px;
+    border-color: $color-text-light;
+    border-style: solid;
+    border-width: 2px;
+    height: fit-content;
+
+    .img-container {
+        height: 80px;
+        width: 80px;
+        margin: 10px;
+        display: inline-grid;
+        vertical-align: top;
+
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: 20px;
+        }
+    }
+
+    .content {
+        min-height: 80px;
+        width: calc(100% - 150px);
+        margin: 10px;
+        display: inline-grid;
+        vertical-align: top;
+
+        h3 {
+            color: $color-text-main;
+            margin: 5px;
+            font-size: 1.4rem;
+        }
+
+        p {
+            color: $color-text-light;
+            margin: 5px;
+            font-size: 1rem;
+        }
+    }
+}
+
+[data-theme="dark"] {
+    .banner {
+        border-color: $color-text-dark-light;
+        background: $color-bg-dark-5;
+
+        .content {
+            h3 {
+                color: $color-text-dark-main;
+            }
+
+            p {
+                color: $color-text-dark-light;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MDX.vue b/src/components/MDX.vue
index 0f7743559..314a16a30 100644
--- a/src/components/MDX.vue
+++ b/src/components/MDX.vue
@@ -1,5 +1,6 @@
 <script lang="tsx">
 import BackupButtons from "@/components/buttons/BackupButtons.vue";
+import Banner from "@/components/Banner.vue";
 import ChannelBackupButton from "@/components/buttons/ChannelBackupButton.vue";
 import DynamicIcon from "@/components/DynamicIcon.vue";
 import * as Vue from 'vue';
@@ -34,7 +35,7 @@ export default defineComponent({
                 {
                     renderFunction.value?.({
                         components: {
-                            PhotoScroll, ChannelBackupButton, BackupButtons, DynamicIcon
+                            PhotoScroll, ChannelBackupButton, BackupButtons, DynamicIcon, Banner
                         }
                     })
                 }
diff --git a/src/logic/data.ts b/src/logic/data.ts
index 8088a6b41..432a44ecd 100644
--- a/src/logic/data.ts
+++ b/src/logic/data.ts
@@ -26,6 +26,12 @@ export interface Person {
     comments: Comment[]
 }
 
+export interface BannerData {
+    icon: string;
+    title: string;
+    text: string;
+}
+
 export function parsePeopleJson(json: string): Person {
     const p = JSON.parse(json)
     if (!p.info) p.info = []