37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import LoadingSpinner from '../components/LoadingSpinner'
|
|
import ErrorState from '../components/ErrorState'
|
|
import { useHealth } from '../hooks/useHealth'
|
|
|
|
export default function HomePage() {
|
|
const { data, isLoading, isError, refetch } = useHealth()
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center gap-6 p-6">
|
|
<h1 className="text-3xl font-bold tracking-tight text-sky-400">Extrudex</h1>
|
|
<p className="text-slate-400">Filament inventory & print tracking</p>
|
|
|
|
<div className="w-full max-w-md rounded-xl border border-slate-700 bg-slate-800/60 p-6 shadow-lg backdrop-blur-sm">
|
|
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-400">
|
|
Backend Health
|
|
</h2>
|
|
|
|
{isLoading && <LoadingSpinner />}
|
|
|
|
{isError && (
|
|
<ErrorState
|
|
message="Backend is unreachable."
|
|
onRetry={() => refetch()}
|
|
/>
|
|
)}
|
|
|
|
{data && (
|
|
<div className="flex items-center gap-2 text-emerald-400">
|
|
<span className="h-2 w-2 rounded-full bg-emerald-400" />
|
|
<span className="text-sm font-medium">{data.status || 'ok'}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|