wip

packages/frontend/src/components/global/MkResult.vue

@@ -0,0 +1,33 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div ref="root" :class="[$style.root]" class="_gaps">
+	<i v-if="type === 'empty'" class="ti ti-info-circle" :class="$style.icon"></i>
+	<div>{{ props.text }}</div>
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts" setup>
+import {} from 'vue';
+
+const props = defineProps<{
+	type: 'empty' | 'notFound' | 'error';
+	text: string;
+}>();
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	text-align: center;
+	padding: 32px;
+}
+
+.icon {
+	font-size: 24px;
+}
+</style>

packages/frontend/src/components/index.ts

@@ -24,6 +24,7 @@ import MkAd from './global/MkAd.vue';
 import MkPageHeader from './global/MkPageHeader.vue';
 import MkStickyContainer from './global/MkStickyContainer.vue';
 import MkLazy from './global/MkLazy.vue';
+import MkResult from './global/MkResult.vue';
 import PageWithHeader from './global/PageWithHeader.vue';
 import PageWithAnimBg from './global/PageWithAnimBg.vue';
 import SearchMarker from './global/SearchMarker.vue';
@@ -61,6 +62,7 @@ export const components = {
 	MkPageHeader: MkPageHeader,
 	MkStickyContainer: MkStickyContainer,
 	MkLazy: MkLazy,
+	MkResult: MkResult,
 	PageWithHeader: PageWithHeader,
 	PageWithAnimBg: PageWithAnimBg,
 	SearchMarker: SearchMarker,
@@ -92,6 +94,7 @@ declare module '@vue/runtime-core' {
 		MkPageHeader: typeof MkPageHeader;
 		MkStickyContainer: typeof MkStickyContainer;
 		MkLazy: typeof MkLazy;
+		MkResult: typeof MkResult;
 		PageWithHeader: typeof PageWithHeader;
 		PageWithAnimBg: typeof PageWithAnimBg;
 		SearchMarker: typeof SearchMarker;