From d185785f20a2c3e58054fd61afd94dd05ba0b207 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 11 Mar 2025 14:52:04 +0900
Subject: enhance(frontend): improve settings page

---
 .../frontend/src/components/MkFeatureBanner.vue    | 43 ++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/frontend/src/components/MkFeatureBanner.vue

(limited to 'packages/frontend/src/components/MkFeatureBanner.vue')

diff --git a/packages/frontend/src/components/MkFeatureBanner.vue b/packages/frontend/src/components/MkFeatureBanner.vue
new file mode 100644
index 0000000000..e990ffc8f0
--- /dev/null
+++ b/packages/frontend/src/components/MkFeatureBanner.vue
@@ -0,0 +1,43 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-panel :class="$style.root">
+	<img :class="$style.img" :src="icon"/>
+	<div :class="$style.text">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+	icon: string;
+	color: string;
+}>(), {
+});
+</script>
+
+<style module lang="scss">
+.root {
+	padding: 20px 24px;
+	text-align: center;
+	border-radius: var(--MI-radius);
+	background: linear-gradient(180deg, color(from v-bind(color) srgb r g b / 0.1), color(from v-bind(color) srgb r g b / 0));
+}
+
+.img {
+	display: block;
+	margin: 0 auto;
+	width: 40px;
+	aspect-ratio: 1;
+}
+
+.text {
+	margin-top: 12px;
+	font-size: 85%;
+	mix-blend-mode: luminosity;
+}
+</style>
-- 
cgit v1.2.3-freya