padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): Enhance ConnectionStatus and Badge components with dynamic status indicators

Browse source 
- Add animated ping effect to ConnectionStatus badge
- Update Badge variants with more subtle color schemes
- Implement success variant for online/offline states
- Reduce text size and improve visual hierarchy
- Use rounded-full badge design for better aesthetics
This commit is contained in:
padreug 2025-03-09 15:08:24 +01:00
parent ea03290f84
commit 0923731ee9
2 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/nostr/ConnectionStatus.vue
View file

@ -10,10 +10,16 @@ defineProps<{
<template> <template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Badge :variant="isConnected ? 'default' : 'destructive'" class="h-5"> <Badge :variant="isConnected ? 'success' : 'destructive'" class="flex items-center gap-1">
NOSTR: {{ isConnected ? 'Connected' : 'Disconnected' }} <span class="relative flex h-2 w-2">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
:class="isConnected ? 'bg-green-400' : 'bg-red-400'" />
<span class="relative inline-flex h-2 w-2 rounded-full"
:class="isConnected ? 'bg-green-500' : 'bg-red-500'" />
</span>
<span class="text-[10px]">{{ isConnected ? 'Online' : 'Offline' }}</span>
</Badge> </Badge>
<p v-if="error" class="text-sm text-destructive"> <p v-if="error" class="text-xs text-destructive">
{{ error.message }} {{ error.message }}
</p> </p>
</div> </div>

10
src/components/ui/badge/index.ts
View file

@ -3,16 +3,18 @@ import { cva, type VariantProps } from 'class-variance-authority'
export { default as Badge } from './Badge.vue' export { default as Badge } from './Badge.vue'
export const badgeVariants = cva( export const badgeVariants = cva(
'inline-flex items-center whitespace-nowrap rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'inline-flex items-center whitespace-nowrap rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors',
{ {
variants: { variants: {
variant: { variant: {
default: default:
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', 'border-transparent bg-primary/10 text-primary hover:bg-primary/20',
secondary: secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', 'border-transparent bg-secondary/10 text-secondary-foreground hover:bg-secondary/20',
destructive: destructive:
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', 'border-transparent bg-destructive/10 text-destructive hover:bg-destructive/20',
success:
'border-transparent bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground', outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground',
}, },
}, },