From 2bfbbbf16ac1f085efa897c98913297fe09eef61 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 23 May 2025 10:46:42 +0900
Subject: enhance(frontend): improve tips

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

(limited to 'packages/frontend/src/components/global')

diff --git a/packages/frontend/src/components/global/MkTip.vue b/packages/frontend/src/components/global/MkTip.vue
new file mode 100644
index 0000000000..384511a0ed
--- /dev/null
+++ b/packages/frontend/src/components/global/MkTip.vue
@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="!store.r.tips.value[props.k]" :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _gaps_s">
+	<div style="font-weight: bold;"><i class="ti ti-bulb"></i> {{ i18n.ts.tip }}:</div>
+	<div><slot></slot></div>
+	<MkButton primary rounded small @click="closeTip()"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { store } from '@/store.js';
+import MkButton from '@/components/MkButton.vue';
+
+const props = withDefaults(defineProps<{
+	k: keyof (typeof store['s']['tips']);
+	warn?: boolean;
+}>(), {
+	warn: false,
+});
+
+function closeTip() {
+	store.set('tips', {
+		...store.r.tips.value,
+		[props.k]: true,
+	});
+}
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 12px 14px;
+	font-size: 90%;
+	background: var(--MI_THEME-infoBg);
+	color: var(--MI_THEME-infoFg);
+	border-radius: var(--MI-radius);
+
+	&.warn {
+		background: var(--MI_THEME-infoWarnBg);
+		color: var(--MI_THEME-infoWarnFg);
+	}
+}
+
+</style>
-- 
cgit v1.2.3-freya