Sergei
bda883d34d
- Create BeneficiaryDetailPage with Overview, Sensors, and Activity tabs - Add StatusBadge and SensorStatusBadge UI components - Add Tabs component (Tabs, TabsList, TabsTrigger, TabsContent) - Add getBeneficiary API method - Include comprehensive tests for all new components - Update ESLint config with root:true to prevent config inheritance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
type BadgeVariant =
|
|
| 'success'
|
|
| 'warning'
|
|
| 'error'
|
|
| 'info'
|
|
| 'default'
|
|
| 'online'
|
|
| 'offline';
|
|
|
|
interface StatusBadgeProps {
|
|
variant?: BadgeVariant;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
dot?: boolean;
|
|
}
|
|
|
|
const variantStyles: Record<BadgeVariant, { bg: string; text: string; dot: string }> = {
|
|
success: { bg: 'bg-green-100', text: 'text-green-700', dot: 'bg-green-500' },
|
|
warning: { bg: 'bg-yellow-100', text: 'text-yellow-700', dot: 'bg-yellow-500' },
|
|
error: { bg: 'bg-red-100', text: 'text-red-700', dot: 'bg-red-500' },
|
|
info: { bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
|
|
default: { bg: 'bg-gray-100', text: 'text-gray-700', dot: 'bg-gray-500' },
|
|
online: { bg: 'bg-green-100', text: 'text-green-700', dot: 'bg-green-500' },
|
|
offline: { bg: 'bg-gray-100', text: 'text-gray-500', dot: 'bg-gray-400' },
|
|
};
|
|
|
|
export function StatusBadge({
|
|
variant = 'default',
|
|
children,
|
|
className = '',
|
|
dot = false,
|
|
}: StatusBadgeProps) {
|
|
const styles = variantStyles[variant];
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${styles.bg} ${styles.text} ${className}`}
|
|
>
|
|
{dot && <span className={`w-1.5 h-1.5 rounded-full ${styles.dot}`} />}
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
interface SensorStatusBadgeProps {
|
|
status: 'online' | 'offline' | 'warning' | 'error';
|
|
className?: string;
|
|
}
|
|
|
|
export function SensorStatusBadge({ status, className = '' }: SensorStatusBadgeProps) {
|
|
const labels: Record<string, string> = {
|
|
online: 'Online',
|
|
offline: 'Offline',
|
|
warning: 'Warning',
|
|
error: 'Error',
|
|
};
|
|
|
|
return (
|
|
<StatusBadge variant={status} dot className={className}>
|
|
{labels[status] || status}
|
|
</StatusBadge>
|
|
);
|
|
}
|