vitest/packages/ui/client/components/ConnectionOverlay.vue
Anjorin Damilare a77afffa83
chore(ui): update UI vue version (#3575)
Co-authored-by: userquin <userquin@gmail.com>
Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>
2023-07-11 09:45:51 +02:00

36 lines
899 B
Vue

<script setup lang="ts">
import { client, isConnected, isConnecting } from '~/composables/client'
</script>
<template>
<template v-if="!isConnected">
<div
fixed inset-0 p2 z-10
select-none
text="center sm"
bg="overlay"
backdrop-blur-sm
backdrop-saturate-0
@click="client.reconnect"
>
<div
h-full
flex="~ col gap-2"
items-center justify-center
:class="isConnecting ? 'animate-pulse' : ''"
>
<div
text="5xl"
:class="isConnecting ? 'i-carbon:renew animate-spin animate-reverse' : 'i-carbon-wifi-off'"
/>
<div text-2xl>
{{ isConnecting ? 'Connecting...' : 'Disconnected' }}
</div>
<div text-lg op50>
Check your terminal or start a new server with `vitest --ui`
</div>
</div>
</div>
</template>
</template>