padreug
18ece1e3e7
- Introduce `isConnecting` state in useNostr composable - Update ConnectionStatus component to handle connecting state - Add warning variant to Badge for connecting status - Implement dynamic status text, color, and animation for connection states - Modify App.vue to pass new isConnecting prop to ConnectionStatus
55 lines
No EOL
1.5 KiB
Vue
55 lines
No EOL
1.5 KiB
Vue
<!-- A component that shows NOSTR connection status -->
|
|
<script setup lang="ts">
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
const props = defineProps<{
|
|
isConnected: boolean
|
|
isConnecting: boolean
|
|
error?: Error | null
|
|
}>()
|
|
|
|
function getStatusVariant() {
|
|
if (props.isConnecting) return 'warning'
|
|
return props.isConnected ? 'success' : 'destructive'
|
|
}
|
|
|
|
function getStatusText() {
|
|
if (props.isConnecting) return 'Connecting'
|
|
return props.isConnected ? 'Online' : 'Offline'
|
|
}
|
|
|
|
function getStatusColor() {
|
|
if (props.isConnecting) return 'bg-yellow-400'
|
|
return props.isConnected ? 'bg-green-400' : 'bg-red-400'
|
|
}
|
|
|
|
function getStatusColorSolid() {
|
|
if (props.isConnecting) return 'bg-yellow-500'
|
|
return props.isConnected ? 'bg-green-500' : 'bg-red-500'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2">
|
|
<Badge :variant="getStatusVariant()" class="flex items-center gap-1">
|
|
<span class="relative flex h-2 w-2">
|
|
<span
|
|
class="absolute inline-flex h-full w-full rounded-full opacity-75"
|
|
:class="[
|
|
getStatusColor(),
|
|
{ 'animate-ping': !props.isConnecting },
|
|
{ 'animate-pulse': props.isConnecting }
|
|
]"
|
|
/>
|
|
<span
|
|
class="relative inline-flex h-2 w-2 rounded-full"
|
|
:class="getStatusColorSolid()"
|
|
/>
|
|
</span>
|
|
<span class="text-[10px]">{{ getStatusText() }}</span>
|
|
</Badge>
|
|
<p v-if="error" class="text-xs text-destructive">
|
|
{{ error.message }}
|
|
</p>
|
|
</div>
|
|
</template> |