fix: polish remote tooltip and device status

This commit is contained in:
Esdras Renan 2025-11-18 21:29:56 -03:00
parent 4f8dad2255
commit b83c37d51f
2 changed files with 20 additions and 21 deletions

View file

@ -5683,6 +5683,7 @@ function DevicesGrid({ devices, companyNameBySlug }: { devices: DevicesQueryItem
function DeviceCard({ device, companyName }: { device: DevicesQueryItem; companyName?: string | null }) {
const router = useRouter()
const effectiveStatus = resolveDeviceStatus(device)
const statusIndicator = getDeviceStatusIndicator(effectiveStatus)
const isActive = device.isActive
const lastHeartbeat = device.lastHeartbeatAt ? new Date(device.lastHeartbeatAt) : null
const deviceType = (device.deviceType ?? "desktop").toLowerCase()
@ -5730,23 +5731,15 @@ function DeviceCard({ device, companyName }: { device: DevicesQueryItem; company
<div className="absolute right-2 top-2">
<span
aria-hidden
className={cn(
"relative block size-2 rounded-full",
effectiveStatus === "online"
? "bg-emerald-500"
: effectiveStatus === "offline"
? "bg-rose-500"
: effectiveStatus === "maintenance"
? "bg-amber-500"
: effectiveStatus === "blocked"
? "bg-orange-500"
: effectiveStatus === "deactivated"
? "bg-slate-500"
: "bg-slate-400"
)}
className={cn("relative block size-2 rounded-full border border-white shadow-sm", statusIndicator.dotClass)}
/>
{effectiveStatus === "online" ? (
<span className="absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400/30 animate-ping" />
{statusIndicator.isPinging ? (
<span
className={cn(
"absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping",
statusIndicator.ringClass
)}
/>
) : null}
</div>
<CardHeader className="pb-2">