Updated displayname

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 (
-        <>
-            <PlayerRank rank={rank} monthly={monthly} plusColor={plusColor} rankColor={rankColor} specialRank={specialRank} />{" "}
-            <PlayerIGN ign={ign} rank={rank} monthly={monthly} rankColor={rankColor} specialRank={specialRank} />{" "}
-            <GuildTag tag={guildTag} tagColor={tagColor} />
-        </>
+        <div className="flex items-end mt-25">
+            <h1 className="text-3xl font-bold">
+                <PlayerRank rank={rank} monthly={monthly} plusColor={plusColor} rankColor={rankColor} specialRank={specialRank} />{" "}
+                <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>
+    )
+}
 }