6b0738839b
- Deleted unused API test files, RTSP diagnostic scripts, and development utility scripts to reduce clutter. - Removed outdated database schema and modularization proposal documents to maintain focus on current architecture. - Cleaned up configuration files and logging scripts that are no longer in use, enhancing project maintainability.
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
|
|
interface StatusWidgetProps {
|
|
title: string
|
|
status: boolean
|
|
statusText?: string
|
|
subtitle?: string
|
|
icon?: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export const StatusWidget: React.FC<StatusWidgetProps> = ({
|
|
title,
|
|
status,
|
|
statusText,
|
|
subtitle,
|
|
icon,
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<div className={`bg-white overflow-hidden shadow rounded-lg ${className}`}>
|
|
<div className="p-5">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
{icon && <div className="flex-shrink-0">{icon}</div>}
|
|
<div className="flex-shrink-0">
|
|
<div
|
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
|
}`}
|
|
>
|
|
{statusText || (status ? 'Online' : 'Offline')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<div className="text-2xl font-semibold text-gray-900">{title}</div>
|
|
{subtitle && (
|
|
<div className="mt-1 text-sm text-gray-500">{subtitle}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|