f950654827
- Custom color system (surface-0..4, accent, mint) replacing raw gray-xxx - Inter + JetBrains Mono fonts via Google Fonts - Refined sidebar: compact logo, geometric icons, subtle active states - Fixed bg-gray-850 bug (invalid Tailwind class) in 9 components - Polished login page with centered card + gradient logo - Unified card/table/button/input styling across all components - Subtle grain texture overlay for depth - Smoother animations (fade-in, slide-up)
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { getHealth } from '../api'
|
|
import { Spinner } from './Common'
|
|
|
|
export default function Health() {
|
|
const [data, setData] = useState<{ version: string } | null>(null)
|
|
const [error, setError] = useState('')
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
getHealth()
|
|
.then(setData)
|
|
.catch((e) => setError(e.message))
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
if (loading) return <Spinner />
|
|
if (error) return <div className="text-red-500 text-center p-8">Error: {error}</div>
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto">
|
|
<h2 className="text-lg font-semibold text-white tracking-tight mb-5">Health Check</h2>
|
|
<div className="bg-surface-1 border border-white/[0.06] rounded-lg p-8">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="relative">
|
|
<div className="w-4 h-4 bg-green-500 rounded-full"></div>
|
|
<div className="absolute inset-0 w-4 h-4 bg-green-500 rounded-full animate-ping opacity-75"></div>
|
|
</div>
|
|
<span className="text-green-500 font-semibold text-lg">System Online</span>
|
|
</div>
|
|
<div className="text-gray-400 mt-4 flex items-baseline gap-2">
|
|
<span>Version:</span>
|
|
<span className="text-white font-mono bg-surface-3/50 px-3 py-1 rounded">{data?.version}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|