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-2xl font-bold mb-6">Health Check</h2>
|
|
<div className="bg-gray-900/50 backdrop-blur border border-gray-800 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-gray-800/50 px-3 py-1 rounded">{data?.version}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|