55 lines
No EOL
1.4 KiB
TypeScript
55 lines
No EOL
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { ServiceStatus } from '@/src/types/service';
|
|
|
|
interface StatusBadgeProps {
|
|
status: ServiceStatus;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
const STATUS_CONFIG = {
|
|
online: {
|
|
bgColor: 'bg-green-50 dark:bg-green-950',
|
|
textColor: 'text-green-700 dark:text-green-300',
|
|
dotColor: 'bg-green-500',
|
|
label: 'Online',
|
|
},
|
|
warning: {
|
|
bgColor: 'bg-amber-50 dark:bg-amber-950',
|
|
textColor: 'text-amber-700 dark:text-amber-300',
|
|
dotColor: 'bg-amber-500',
|
|
label: 'Warnung',
|
|
},
|
|
offline: {
|
|
bgColor: 'bg-red-50 dark:bg-red-950',
|
|
textColor: 'text-red-700 dark:text-red-300',
|
|
dotColor: 'bg-red-500',
|
|
label: 'Offline',
|
|
},
|
|
unknown: {
|
|
bgColor: 'bg-slate-50 dark:bg-slate-950',
|
|
textColor: 'text-slate-700 dark:text-slate-300',
|
|
dotColor: 'bg-slate-500',
|
|
label: 'Unbekannt',
|
|
},
|
|
} as const;
|
|
|
|
export function StatusBadge({ status, size = 'md' }: StatusBadgeProps) {
|
|
const config = STATUS_CONFIG[status];
|
|
const sizeClasses = size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-3 py-1 text-xs';
|
|
|
|
return (
|
|
<div
|
|
className={`inline-flex items-center gap-2 rounded-full ${sizeClasses} ${config.bgColor}`}
|
|
>
|
|
<span
|
|
className={`w-2 h-2 rounded-full ${config.dotColor} ${
|
|
status !== 'unknown' ? 'animate-pulse' : ''
|
|
}`}
|
|
/>
|
|
<span className={`font-medium ${config.textColor}`}>
|
|
{config.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
} |