You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.7 KiB
48 lines
1.7 KiB
import { useEffect, useState } from 'react'
|
|
import { useServerHealthStore } from '@/stores/server-health'
|
|
import ServerStatusDialog from './ServerStatusDialog'
|
|
|
|
export default function ServerHealthTrigger() {
|
|
const health = useServerHealthStore()
|
|
const [open, setOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
health.checkHealth(false)
|
|
const timer = setInterval(() => {
|
|
health.checkHealth(true)
|
|
}, 15000)
|
|
return () => clearInterval(timer)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
aria-label="وضعیت ارتباط سرور"
|
|
title={
|
|
health.status === 'connected'
|
|
? `سرور آنلاین (${health.latencyMs ?? 0}ms) - کلیک جهت جزئیات`
|
|
: health.status === 'checking'
|
|
? 'در حال بررسی سرور...'
|
|
: 'سرور قطع است - کلیک جهت جزئیات'
|
|
}
|
|
className="relative flex size-9 items-center justify-center rounded-xl border border-border-soft bg-card/60 transition-all hover:bg-card hover:border-primary/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring shadow-sm cursor-pointer"
|
|
>
|
|
<span className="flex size-2.5">
|
|
<span
|
|
className={`inline-flex size-2.5 rounded-full ${
|
|
health.status === 'connected'
|
|
? 'bg-emerald-500 shadow-[0_0_8px_#10b981]'
|
|
: health.status === 'checking'
|
|
? 'bg-amber-400'
|
|
: 'bg-rose-500 shadow-[0_0_8px_#f43f5e]'
|
|
}`}
|
|
/>
|
|
</span>
|
|
</button>
|
|
|
|
<ServerStatusDialog open={open} onOpenChange={setOpen} />
|
|
</>
|
|
)
|
|
}
|