v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

1 files changed, 42 insertions, 0 deletions

diff --git a/src/client/components/error.vue b/src/client/components/error.vue
new file mode 100644
index 0000000000..1dc21dbb19
--- /dev/null
+++ b/src/client/components/error.vue
@@ -0,0 +1,42 @@
+<template>
+<div class="wjqjnyhzogztorhrdgcpqlkxhkmuetgj _panel">
+	<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
+	<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../i18n';
+import MkButton from './ui/button.vue';
+
+export default Vue.extend({
+	i18n,
+	components: {
+		MkButton,
+	},
+	data() {
+		return {
+			faExclamationTriangle
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.wjqjnyhzogztorhrdgcpqlkxhkmuetgj {
+	max-width: 350px;
+	margin: 0 auto;
+	padding: 32px;
+	text-align: center;
+
+	> p {
+		margin: 0 0 8px 0;
+	}
+
+	> .button {
+		margin: 0 auto;
+	}
+}
+</style>