Updated guild members page

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

@@ -6,7 +6,10 @@ import { getColor } from "@/lib/colors"
 import { formatDate, formatNumber } from "@/lib/formatters"
 import { head } from "@/lib/hypixel/general"
 import { Guild } from "@/lib/schema/guild"
-import { PlayerForGuild } from "@/lib/schema/player"
+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"
@@ -17,7 +20,7 @@ type MemberWithPlayer = Guild["guild"]["members"][number] & {
     error?: boolean
 }
 
-export function GuildMembers({ members: mem }: { members: Guild["guild"]["members"] }) {
+export function GuildMembers({ members: mem, ranks }: { members: Guild["guild"]["members"], ranks: Guild["guild"]["ranks"] }) {
     const [members, setMembers] = useState<MemberWithPlayer[]>(
         mem.map(member => ({ ...member, loading: false, error: false }))
     )
@@ -69,7 +72,23 @@ export function GuildMembers({ members: mem }: { members: Guild["guild"]["member
                         </TableRow>
                     </TableHeader>
                     <TableBody className="space-y-4">
-                        {members.filter(member => member.player).map((member, i) => <MemberCard key={i} member={member} />)}
+                        {members.filter(member => member.player).sort((a, b) => {
+                            // Guild Master always comes first
+                            if (a.rank === "Guild Master" && b.rank !== "Guild Master") return -1
+                            if (b.rank === "Guild Master" && a.rank !== "Guild Master") return 1
+
+                            const aRank = ranks?.find(rank => rank.name === a.rank)
+                            const bRank = ranks?.find(rank => rank.name === b.rank)
+
+                            const aPriority = aRank?.priority ?? Number.MIN_SAFE_INTEGER
+                            const bPriority = bRank?.priority ?? Number.MIN_SAFE_INTEGER
+
+                            if (aPriority !== bPriority) {
+                                return bPriority - aPriority
+                            }
+
+                            return a.uuid.localeCompare(b.uuid)
+                        }).map((member, i) => <MemberCard key={i} member={member} />)}
                     </TableBody>
                 </Table>
                 {currentIndex < members.length && (
@@ -88,9 +107,9 @@ function MemberCard({ member: m }: { member: MemberWithPlayer }) {
             <TableCell>
                 <Link href={`https://namemc.com/profile/${m.uuid}`}>
                     <Image
-                        src={head(m.uuid, 40)}
+                        src={head(m.uuid, 32)}
-                        width={40}
+                        width={32}
-                        height={40}
+                        height={32}
                         alt={"Member head"}
                         unoptimized
                         className="shadow-2xl"

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

@@ -113,7 +113,7 @@ async function SuspendedPage({ params, searchParams }: Pick<PageProps<"/guild/[v
             <div className="flex flex-col gap-6 px-6 pb-4 mt-8 w-full max-w-7xl md:flex-row">
                 <Sidebar guild={guild} />
                 <div className="mx-auto space-y-4 w-full lg:mx-0 lg:w-3/4 max-w-120 md:max-w-7/10">
-                    <GuildMembers members={guild.members} />
+                    <GuildMembers members={guild.members} ranks={guild.ranks} />
                 </div>
             </div>
         </div>