Updated structure

src/app/(stats)/_components/displayname.tsx

@@ -0,0 +1,135 @@
+import { getColor } from "@/lib/colors"
+
+export function PlayerIGN(
+    { ign, rank, monthly, rankColor, specialRank, prefix }: {
+        ign: string
+        rank: string | undefined
+        monthly: string | undefined
+        rankColor: string | undefined
+        specialRank: string | undefined
+        prefix: string | undefined
+    }
+) {
+    if (prefix === "[PIG+++]") {
+        return <span className="text-mc-light-purple">{ign}</span>
+    }
+
+    if (specialRank) {
+        if (specialRank === "YOUTUBER") {
+            return <span className="text-mc-red">{ign}</span>
+        }
+
+        if (specialRank === "STAFF") {
+            return <span className="text-mc-red">{ign}</span>
+        }
+    }
+
+    if (monthly === "SUPERSTAR") {
+        if (rankColor === "GOLD") {
+            return <span className="text-mc-gold">{ign}</span>
+        } else {
+            return <span className="text-mc-aqua">{ign}</span>
+        }
+    }
+
+    switch (rank) {
+        case "VIP":
+            return <span className="text-mc-green">{ign}</span>
+        case "VIP_PLUS":
+            return <span className="text-mc-green">{ign}</span>
+        case "MVP":
+            return <span className="text-mc-aqua">{ign}</span>
+        case "MVP_PLUS":
+            return <span className="text-mc-aqua">{ign}</span>
+        default:
+            return <span className="text-mc-gray">{ign}</span>
+    }
+}
+
+export function PlayerRank(
+    { rank, monthly, plusColor, rankColor, specialRank, prefix }: {
+        rank: string | undefined
+        monthly: string | undefined
+        plusColor?: string
+        rankColor: string | undefined
+        specialRank: string | undefined
+        prefix: string | undefined
+    }
+) {
+    if (prefix === "[PIG+++]") {
+        return (
+            <>
+                <span className="text-mc-light-purple">[PIG</span>
+                <span className="text-mc-aqua">+++</span>
+                <span className="text-mc-light-purple">]</span>
+            </>
+        )
+    }
+
+    if (specialRank) {
+        if (specialRank === "YOUTUBER") {
+            return (
+                <>
+                    <span className="text-mc-red">[</span>
+                    <span className="text-mc-white">YOUTUBE</span>
+                    <span className="text-mc-red">]</span>
+                </>
+            )
+        }
+
+        if (specialRank === "STAFF") {
+            return (
+                <>
+                    <span className="text-mc-red">[</span>
+                    <span className="text-mc-gold">ዞ</span>
+                    <span className="text-mc-red">]</span>
+                </>
+            )
+        }
+    }
+
+    if (monthly === "SUPERSTAR") {
+        if (rankColor === "GOLD") {
+            return (
+                <>
+                    <span className="text-mc-gold">[MVP</span>
+                    <span className={getColor(plusColor)}>++</span>
+                    <span className="text-mc-gold">]</span>
+                </>
+            )
+        } else {
+            return (
+                <>
+                    <span className="text-mc-aqua">[MVP</span>
+                    <span className={getColor(plusColor)}>++</span>
+                    <span className="text-mc-aqua">]</span>
+                </>
+            )
+        }
+    }
+
+    switch (rank) {
+        case "VIP":
+            return <span className="text-mc-green">[VIP]</span>
+        case "VIP_PLUS":
+            return (
+                <>
+                    <span className="text-mc-green">[VIP</span>
+                    <span className="text-mc-gold">+</span>
+                    <span className="text-mc-green">]</span>
+                </>
+            )
+        case "MVP":
+            return <span className="text-mc-aqua">[MVP]</span>
+        case "MVP_PLUS":
+            return (
+                <>
+                    <span className="text-mc-aqua">[MVP</span>
+                    <span className={getColor(plusColor)}>+</span>
+                    <span className="text-mc-aqua">]</span>
+                </>
+            )
+        default:
+            return null
+    }
+}

src/app/(stats)/guild/[value]/_components/members.tsx

@@ -1,20 +1,19 @@
 "use client"
 
+import { PlayerIGN, PlayerRank } from "@/app/(stats)/_components/displayname"
 import { Card, CardContent } from "@/components/ui/card"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { getColor } from "@/lib/colors"
 import { formatDate, formatNumber } from "@/lib/formatters"
 import { head } from "@/lib/hypixel/general"
 import { Guild } from "@/lib/schema/guild"
 import { playerForGuildSchema } from "@/lib/schema/player"
-import z from "zod"
-
-type PlayerForGuild = z.infer<typeof playerForGuildSchema>
 import Image from "next/image"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { toast } from "sonner"
+import z from "zod"
 
+type PlayerForGuild = z.infer<typeof playerForGuildSchema>
 type MemberWithPlayer = Guild["guild"]["members"][number] & {
     player?: PlayerForGuild["player"]
     loading?: boolean
@@ -55,15 +54,15 @@ export function GuildMembers({ members: mem, ranks }: { members: Guild["guild"][
                 })
             }, 100)
 
+            toast.info(`Loaded ${members.filter(member => member.player).length} out of ${members.length} guild members`, {
+                id: "guild.members.loader",
+                duration: 1000
+            })
+
             return () => clearTimeout(timer)
         }
     }, [currentIndex, members, isLoading])
 
-    toast.info(`Loaded ${members.filter(member => member.player).length} out of ${members.length} guild members`, {
-        id: "guild.members.loader",
-        duration: 1000
-    })
-
     return (
         <Card>
             <CardContent>
@@ -140,137 +139,3 @@ function MemberCard({ member: m }: { member: MemberWithPlayer }) {
         </TableRow>
     )
 }
-
-function PlayerIGN(
-    { ign, rank, monthly, rankColor, specialRank, prefix }: {
-        ign: string
-        rank: string | undefined
-        monthly: string | undefined
-        rankColor: string | undefined
-        specialRank: string | undefined
-        prefix: string | undefined
-    }
-) {
-    if (prefix === "[PIG+++]") {
-        return <span className="text-mc-light-purple">{ign}</span>
-    }
-
-    if (specialRank) {
-        if (specialRank === "YOUTUBER") {
-            return <span className="text-mc-red">{ign}</span>
-        }
-
-        if (specialRank === "STAFF") {
-            return <span className="text-mc-red">{ign}</span>
-        }
-    }
-
-    if (monthly === "SUPERSTAR") {
-        if (rankColor === "GOLD") {
-            return <span className="text-mc-gold">{ign}</span>
-        } else {
-            return <span className="text-mc-aqua">{ign}</span>
-        }
-    }
-
-    switch (rank) {
-        case "VIP":
-            return <span className="text-mc-green">{ign}</span>
-        case "VIP_PLUS":
-            return <span className="text-mc-green">{ign}</span>
-        case "MVP":
-            return <span className="text-mc-aqua">{ign}</span>
-        case "MVP_PLUS":
-            return <span className="text-mc-aqua">{ign}</span>
-        default:
-            return <span className="text-mc-gray">{ign}</span>
-    }
-}
-
-function PlayerRank(
-    { rank, monthly, plusColor, rankColor, specialRank, prefix }: {
-        rank: string | undefined
-        monthly: string | undefined
-        plusColor?: string
-        rankColor: string | undefined
-        specialRank: string | undefined
-        prefix: string | undefined
-    }
-) {
-    if (prefix === "[PIG+++]") {
-        return (
-            <>
-                <span className="text-mc-light-purple">[PIG</span>
-                <span className="text-mc-aqua">+++</span>
-                <span className="text-mc-light-purple">]</span>
-            </>
-        )
-    }
-
-    if (specialRank) {
-        if (specialRank === "YOUTUBER") {
-            return (
-                <>
-                    <span className="text-mc-red">[</span>
-                    <span className="text-mc-white">YOUTUBE</span>
-                    <span className="text-mc-red">]</span>
-                </>
-            )
-        }
-
-        if (specialRank === "STAFF") {
-            return (
-                <>
-                    <span className="text-mc-red">[</span>
-                    <span className="text-mc-gold">ዞ</span>
-                    <span className="text-mc-red">]</span>
-                </>
-            )
-        }
-    }
-
-    if (monthly === "SUPERSTAR") {
-        if (rankColor === "GOLD") {
-            return (
-                <>
-                    <span className="text-mc-gold">[MVP</span>
-                    <span className={getColor(plusColor)}>++</span>
-                    <span className="text-mc-gold">]</span>
-                </>
-            )
-        } else {
-            return (
-                <>
-                    <span className="text-mc-aqua">[MVP</span>
-                    <span className={getColor(plusColor)}>++</span>
-                    <span className="text-mc-aqua">]</span>
-                </>
-            )
-        }
-    }
-
-    switch (rank) {
-        case "VIP":
-            return <span className="text-mc-green">[VIP]</span>
-        case "VIP_PLUS":
-            return (
-                <>
-                    <span className="text-mc-green">[VIP</span>
-                    <span className="text-mc-gold">+</span>
-                    <span className="text-mc-green">]</span>
-                </>
-            )
-        case "MVP":
-            return <span className="text-mc-aqua">[MVP]</span>
-        case "MVP_PLUS":
-            return (
-                <>
-                    <span className="text-mc-aqua">[MVP</span>
-                    <span className={getColor(plusColor)}>+</span>
-                    <span className="text-mc-aqua">]</span>
-                </>
-            )
-        default:
-            return null
-    }
-}

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

@@ -1,22 +1,18 @@
+import { PlayerIGN, PlayerRank } from "@/app/(stats)/_components/displayname"
 import { getColor } from "@/lib/colors"
 import { head } from "@/lib/hypixel/general"
-import { Player } from "@/lib/schema/player"
 import Image from "next/image"
 import Link from "next/link"
 import { DevBadge } from "./badge"
 import { OnlineStatus } from "./online-status"
 
-type NewPackageRank = Player["player"]["newPackageRank"]
-type MonthlyPackageRank = Player["player"]["monthlyPackageRank"]
-type RankColor = Player["player"]["monthlyRankColor"]
-
 export default function DisplayName(
     { ign, uuid, rank, monthly, rankColor, plusColor, guildTag, tagColor, specialRank, lastLogin, lastLogout, prefix }: {
         ign: string
         uuid: string
-        rank: NewPackageRank
+        rank: string | undefined
-        monthly: MonthlyPackageRank
+        monthly: string | undefined
-        rankColor: RankColor
+        rankColor: string | undefined
         plusColor: string | undefined
         guildTag: string | undefined
         tagColor: string | undefined
@@ -50,140 +46,6 @@ export default function DisplayName(
     )
 }
 
-function PlayerIGN(
-    { ign, rank, monthly, rankColor, specialRank, prefix }: {
-        ign: string
-        rank: NewPackageRank
-        monthly: MonthlyPackageRank
-        rankColor: RankColor
-        specialRank: string | undefined
-        prefix: string | undefined
-    }
-) {
-    if (prefix === "[PIG+++]") {
-        return <span className="text-mc-light-purple">{ign}</span>
-    }
-
-    if (specialRank) {
-        if (specialRank === "YOUTUBER") {
-            return <span className="text-mc-red">{ign}</span>
-        }
-
-        if (specialRank === "STAFF") {
-            return <span className="text-mc-red">{ign}</span>
-        }
-    }
-
-    if (monthly === "SUPERSTAR") {
-        if (rankColor === "GOLD") {
-            return <span className="text-mc-gold">{ign}</span>
-        } else {
-            return <span className="text-mc-aqua">{ign}</span>
-        }
-    }
-
-    switch (rank) {
-        case "VIP":
-            return <span className="text-mc-green">{ign}</span>
-        case "VIP_PLUS":
-            return <span className="text-mc-green">{ign}</span>
-        case "MVP":
-            return <span className="text-mc-aqua">{ign}</span>
-        case "MVP_PLUS":
-            return <span className="text-mc-aqua">{ign}</span>
-        default:
-            return <span className="text-mc-gray">{ign}</span>
-    }
-}
-
-function PlayerRank(
-    { rank, monthly, plusColor, rankColor, specialRank, prefix }: {
-        rank: NewPackageRank
-        monthly: MonthlyPackageRank
-        plusColor?: string
-        rankColor: RankColor
-        specialRank: string | undefined
-        prefix: string | undefined
-    }
-) {
-    if (prefix === "[PIG+++]") {
-        return (
-            <>
-                <span className="text-mc-light-purple">[PIG</span>
-                <span className="text-mc-aqua">+++</span>
-                <span className="text-mc-light-purple">]</span>
-            </>
-        )
-    }
-
-    if (specialRank) {
-        if (specialRank === "YOUTUBER") {
-            return (
-                <>
-                    <span className="text-mc-red">[</span>
-                    <span className="text-mc-white">YOUTUBE</span>
-                    <span className="text-mc-red">]</span>
-                </>
-            )
-        }
-
-        if (specialRank === "STAFF") {
-            return (
-                <>
-                    <span className="text-mc-red">[</span>
-                    <span className="text-mc-gold">ዞ</span>
-                    <span className="text-mc-red">]</span>
-                </>
-            )
-        }
-    }
-
-    if (monthly === "SUPERSTAR") {
-        if (rankColor === "GOLD") {
-            return (
-                <>
-                    <span className="text-mc-gold">[MVP</span>
-                    <span className={getColor(plusColor)}>++</span>
-                    <span className="text-mc-gold">]</span>
-                </>
-            )
-        } else {
-            return (
-                <>
-                    <span className="text-mc-aqua">[MVP</span>
-                    <span className={getColor(plusColor)}>++</span>
-                    <span className="text-mc-aqua">]</span>
-                </>
-            )
-        }
-    }
-
-    switch (rank) {
-        case "VIP":
-            return <span className="text-mc-green">[VIP]</span>
-        case "VIP_PLUS":
-            return (
-                <>
-                    <span className="text-mc-green">[VIP</span>
-                    <span className="text-mc-gold">+</span>
-                    <span className="text-mc-green">]</span>
-                </>
-            )
-        case "MVP":
-            return <span className="text-mc-aqua">[MVP]</span>
-        case "MVP_PLUS":
-            return (
-                <>
-                    <span className="text-mc-aqua">[MVP</span>
-                    <span className={getColor(plusColor)}>+</span>
-                    <span className="text-mc-aqua">]</span>
-                </>
-            )
-        default:
-            return null
-    }
-}
-
 function GuildTag({ tag, tagColor, ign }: { tag?: string, tagColor?: string, ign: string }) {
     if (!tag) return null