Updated displayname

src/app/(stats)/player/[ign]/page.tsx

@@ -56,18 +56,18 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
 
     return (
         <div className="flex flex-col items-center">
-            <h1 className="text-3xl font-bold mt-25">
+            <DisplayName
-                <DisplayName
+                ign={player.displayname}
-                    ign={player.displayname}
+                rank={player.newPackageRank}
-                    rank={player.newPackageRank}
+                monthly={player.monthlyPackageRank}
-                    monthly={player.monthlyPackageRank}
+                rankColor={player.monthlyRankColor}
-                    rankColor={player.monthlyRankColor}
+                plusColor={player.rankPlusColor}
-                    plusColor={player.rankPlusColor}
+                guildTag={guild?.tag}
-                    guildTag={guild?.tag}
+                tagColor={guild?.tagColor}
-                    tagColor={guild?.tagColor}
+                specialRank={player.rank}
-                    specialRank={player.rank}
+                lastLogin={player.lastLogin}
-                />
+                lastLogout={player.lastLogout}
-            </h1>
+            />
             <h1>
                 {player.uuid}
             </h1>

src/components/player/displayname.tsx

@@ -1,12 +1,14 @@
 import { getColor } from "@/lib/colors"
 import { Player } from "@/lib/schema/player"
+import { Wifi, WifiOff } from "lucide-react"
+import Link from "next/link"
 
 type NewPackageRank = Player["player"]["newPackageRank"]
 type MonthlyPackageRank = Player["player"]["monthlyPackageRank"]
 type RankColor = Player["player"]["monthlyRankColor"]
 
 export default function DisplayName(
-    { ign, rank, monthly, rankColor, plusColor, guildTag, tagColor, specialRank }: {
+    { ign, rank, monthly, rankColor, plusColor, guildTag, tagColor, specialRank, lastLogin, lastLogout }: {
         ign: string
         rank: NewPackageRank
         monthly: MonthlyPackageRank
@@ -15,14 +17,19 @@ export default function DisplayName(
         guildTag: string | undefined
         tagColor: string | undefined
         specialRank: string | undefined
+        lastLogin: number | undefined
+        lastLogout: number | undefined
     }
 ) {
     return (
-        <>
+        <div className="flex items-end mt-25">
-            <PlayerRank rank={rank} monthly={monthly} plusColor={plusColor} rankColor={rankColor} specialRank={specialRank} />{" "}
+            <h1 className="text-3xl font-bold">
-            <PlayerIGN ign={ign} rank={rank} monthly={monthly} rankColor={rankColor} specialRank={specialRank} />{" "}
+                <PlayerRank rank={rank} monthly={monthly} plusColor={plusColor} rankColor={rankColor} specialRank={specialRank} />{" "}
-            <GuildTag tag={guildTag} tagColor={tagColor} />
+                <PlayerIGN ign={ign} rank={rank} monthly={monthly} rankColor={rankColor} specialRank={specialRank} />{" "}
-        </>
+                <GuildTag tag={guildTag} tagColor={tagColor} ign={ign} />
+            </h1>
+            <OnlineStatus lastLogin={lastLogin} lastLogout={lastLogout} />
+        </div>
     )
 }
 
@@ -144,10 +151,15 @@ function PlayerRank(
     }
 }
 
-function GuildTag({ tag, tagColor }: { tag?: string, tagColor?: string }) {
+function GuildTag({ tag, tagColor, ign }: { tag?: string, tagColor?: string, ign: string }) {
     if (!tag) return null
 
     const color = getColor(tagColor, "text", "gray")
 
-    return <span className={color}>[{tag}]</span>
+    return (
+        <Link href={`/guild/${ign}`}>
+            <span className={color}>[{tag}]</span>
+        </Link>
+    )
+}
 }

src/lib/schema/player.ts

@@ -40,6 +40,7 @@ export const playerSchema = z.looseObject({
         }).optional(),
         firstLogin: z.number().optional(),
         lastLogin: z.number().optional(),
+        lastLogout: z.number().optional(),
         socialMedia: z.looseObject({
             links: z.looseObject({
                 DISCORD: z.string().optional(),