Updated onlinestatus

src/components/player/displayname.tsx

@@ -1,7 +1,7 @@
 import { getColor } from "@/lib/colors"
 import { Player } from "@/lib/schema/player"
-import { Wifi, WifiOff } from "lucide-react"
 import Link from "next/link"
+import { OnlineStatus } from "./online-status"
 
 type NewPackageRank = Player["player"]["newPackageRank"]
 type MonthlyPackageRank = Player["player"]["monthlyPackageRank"]
@@ -162,26 +162,3 @@ function GuildTag({ tag, tagColor, ign }: { tag?: string, tagColor?: string, ign
         </Link>
     )
 }
-
-function OnlineStatus({ lastLogin, lastLogout }: { lastLogin: number | undefined, lastLogout: number | undefined }) {
-    const size = 36
-
-    if (!lastLogout || !lastLogin) {
-        return (
-            <WifiOff className="text-mc-gray" size={size} />
-            // Offline. Player is most likely in status offline or a staff with api off.
-        )
-    }
-
-    if (lastLogout > lastLogin) {
-        return (
-            <WifiOff className="text-mc-gray" size={size} />
-            // {`Offline. Last seen online ${formatRelativeTime(lastLogout, "past")}`}
-        )
-    }
-
-    return (
-        <Wifi className="text-mc-green" size={size} />
-        // {`Online. Online for ${formatRelativeTime(lastLogout, "future")}`}
-    )
-}

src/components/player/online-status.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { formatRelativeTime } from "@/lib/formatters"
+import { Wifi, WifiOff } from "lucide-react"
+import { useEffect, useState } from "react"
+import { Tooltip } from "react-tooltip"
+
+export function OnlineStatus({ lastLogin, lastLogout }: { lastLogin: number | undefined, lastLogout: number | undefined }) {
+    const [pos, setPos] = useState({ x: 0, y: 0 })
+    const size = 36
+
+    useEffect(() => {
+        const controller = new AbortController()
+
+        window.addEventListener("mousemove", (e) => {
+            if (!(e.target instanceof SVGElement)) return
+            if (e.target.dataset.id !== "online-status") return
+
+            setPos({ x: e.clientX, y: e.clientY - 10 })
+        }, { signal: controller.signal })
+
+        return () => {
+            controller.abort()
+        }
+    })
+
+    if (!lastLogout || !lastLogin) {
+        return (
+            <>
+                <WifiOff
+                    data-id="online-status"
+                    data-tooltip-id="online-status"
+                    data-tooltip-content="Offline. Player is most likely in status offline or a staff with api off."
+                    suppressHydrationWarning
+                    className="text-mc-gray"
+                    size={size}
+                />
+                <Tooltip id="online-status" position={pos} />
+            </>
+        )
+    }
+
+    if (lastLogout > lastLogin) {
+        return (
+            <>
+                <WifiOff
+                    data-id="online-status"
+                    data-tooltip-id="online-status"
+                    data-tooltip-content={`Offline. Last seen online ${formatRelativeTime(lastLogout, "past")}`}
+                    suppressHydrationWarning
+                    className="text-mc-gray"
+                    size={size}
+                />
+                <Tooltip id="online-status" position={pos} />
+            </>
+        )
+    }
+
+    return (
+        <>
+            <Wifi
+                data-id="online-status"
+                data-tooltip-id="online-status"
+                data-tooltip-content={`Online. Online for ${formatRelativeTime(lastLogout, "future")}`}
+                suppressHydrationWarning
+                className="text-mc-green"
+                size={size}
+            />
+            <Tooltip id="online-status" position={pos} />
+        </>
+    )
+}