[R] Refactor Banner

one-among-us · Jul 14, 2024 · 75d2fec · 75d2fec
1 parent b28a716
commit 75d2fec
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 1 deletion.
diff --git 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
@@ -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>
diff --git 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
@@ -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 = []