diff options
Diffstat (limited to 'packages/client/src/components/global/MkError.vue')
| -rw-r--r-- | packages/client/src/components/global/MkError.vue | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue new file mode 100644 index 0000000000..4e2ba07d30 --- /dev/null +++ b/packages/client/src/components/global/MkError.vue @@ -0,0 +1,36 @@ +<template> +<transition :name="$store.state.animation ? 'zoom' : ''" appear> + <div class="mjndxjcg"> + <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <p><i class="fas fa-exclamation-triangle"></i> {{ i18n.ts.somethingHappened }}</p> + <MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton> + </div> +</transition> +</template> + +<script lang="ts" setup> +import MkButton from '@/components/ui/button.vue'; +import { i18n } from '@/i18n'; +</script> + +<style lang="scss" scoped> +.mjndxjcg { + padding: 32px; + text-align: center; + + > p { + margin: 0 0 8px 0; + } + + > .button { + margin: 0 auto; + } + + > img { + vertical-align: bottom; + height: 128px; + margin-bottom: 16px; + border-radius: 16px; + } +} +</style> |