Added online status

src/components/player/displayname.tsx

@@ -1,7 +1,9 @@
 import { getColor } from "@/lib/colors"
+import { formatRelativeTime } from "@/lib/formatters"
 import { Player } from "@/lib/schema/player"
 import { Wifi, WifiOff } from "lucide-react"
 import Link from "next/link"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 
 type NewPackageRank = Player["player"]["newPackageRank"]
 type MonthlyPackageRank = Player["player"]["monthlyPackageRank"]
@@ -162,4 +164,44 @@ 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 (
+            <Tooltip>
+                <TooltipTrigger>
+                    <WifiOff className="text-mc-gray" size={size} />
+                </TooltipTrigger>
+                <TooltipContent>
+                    Offline. Player is most likely in status offline or a staff with api off.
+                </TooltipContent>
+            </Tooltip>
+        )
+    }
+
+    if (lastLogout > lastLogin) {
+        return (
+            <Tooltip>
+                <TooltipTrigger>
+                    <WifiOff className="text-mc-gray" size={size} />
+                </TooltipTrigger>
+                <TooltipContent>
+                    {`Offline. Last seen online ${formatRelativeTime(lastLogout, "past")}`}
+                </TooltipContent>
+            </Tooltip>
+        )
+    }
+
+    return (
+        <Tooltip>
+            <TooltipTrigger>
+                <Wifi className="text-mc-green" size={size} />
+            </TooltipTrigger>
+            <TooltipContent>
+                {`Online. Online for ${formatRelativeTime(lastLogout, "future")}`}
+            </TooltipContent>
+        </Tooltip>
+    )
 }