Added first skywars stats

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

@@ -18,7 +18,7 @@ type SidebarProps = {
 
 export default function Sidebar({ level, ign, player, guild }: SidebarProps) {
     return (
-        <Card className="overflow-hidden w-1/4 max-h-fit">
+        <Card className="w-1/4">
             <CardContent>
                 <div className="flex justify-between px-8">
                     <div className="text-center">

src/app/(stats)/player/[ign]/_stats/skywars/skywars-components.tsx

@@ -0,0 +1,51 @@
+import { getSkyWarsIcon, getTextColor } from "@/lib/hypixel/skywars"
+import { getSkywarsLevel } from "@/lib/hypixel/skyWarsLevel"
+
+export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefined }) {
+    const level = getSkywarsLevel(xp)
+    const colors = getTextColor(Math.floor(level))
+    const swIcon = getSkyWarsIcon(icon)
+    const val = `${Math.floor(level)}${swIcon}`
+
+    if (level > 150) {
+        return (
+            <p className="font-bold">
+                <span className={`text-mc-${colors.brackets}`}>[</span>
+                <span
+                    style={{
+                        backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
+                        WebkitBackgroundClip: "text",
+                        color: "transparent"
+                    }}
+                >
+                    {`${val}`}
+                </span>
+                <span className={`text-mc-${colors.brackets}`}>]</span>
+            </p>
+        )
+    }
+
+    if (level === 50) {
+        <p>
+            <span className={`text-mc-${colors.brackets}`}>[</span>
+            <span
+                style={{
+                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
+                    WebkitBackgroundClip: "text",
+                    color: "transparent"
+                }}
+            >
+                {`${val}`}
+            </span>
+            <span className={`text-mc-${colors.brackets}`}>]</span>
+        </p>
+    }
+
+    return (
+        <p>
+            <span className={`text-mc-${colors.brackets}`}>[</span>
+            <span className={`text-mc-${colors.text}`}>{val}</span>
+            <span className={`text-mc-${colors.brackets}`}>]</span>
+        </p>
+    )
+}

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

@@ -0,0 +1,81 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Separator } from "@/components/ui/separator"
+import { formatNumber } from "@/lib/formatters"
+import { Player } from "@/lib/schema/player"
+import { ChevronDown, ChevronUp } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import CollapsedStats from "../../_components/CollapsedStats"
+import { SkywarsLevel } from "./skywars-components"
+
+export default function SkyWarsStats({ stats }: { stats: Player["player"]["stats"]["SkyWars"] }) {
+    const ref = useRef<HTMLDivElement>(null)
+    const [opened, setOpened] = useState(false)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes" && mutation.attributeName === "data-state") {
+                    const dataState = ref.current?.getAttribute("data-state")
+                    setOpened(dataState === "open")
+                }
+            })
+        })
+
+        observer.observe(ref.current, {
+            attributes: true,
+            attributeFilter: ["data-state"]
+        })
+
+        return () => observer.disconnect()
+    }, [])
+
+    if (!stats) return null
+
+    const kd = (stats.kills / stats.deaths).toFixed(2)
+    const wl = (stats.wins / stats.losses).toFixed(2)
+
+    return (
+        <Card>
+            <CardContent>
+                <Collapsible ref={ref}>
+                    <div className="flex justify-between">
+                        <h1 className="text-xl font-bold">SkyWars</h1>
+                        <div className="flex gap-4">
+                            <CollapsedStats
+                                stats={[
+                                    {
+                                        title: <p>Level</p>,
+                                        stat: <SkywarsLevel xp={stats.skywars_experience} icon={stats.selected_prestige_icon} />
+                                    },
+                                    {
+                                        title: <p>KD</p>,
+                                        stat: <p>{kd}</p>
+                                    },
+                                    {
+                                        title: <p>Wins</p>,
+                                        stat: <p>{formatNumber(stats.wins)}</p>
+                                    },
+                                    {
+                                        title: <p>WL</p>,
+                                        stat: <p>{wl}</p>
+                                    }
+                                ]}
+                            />
+                        </div>
+                        <CollapsibleTrigger className="transition-all">
+                            {opened === false ? <ChevronDown /> : <ChevronUp />}
+                        </CollapsibleTrigger>
+                    </div>
+                    <CollapsibleContent>
+                        <Separator className="my-4" />
+                    </CollapsibleContent>
+                </Collapsible>
+            </CardContent>
+        </Card>
+    )
+}

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

@@ -7,6 +7,7 @@ import { Loader2Icon } from "lucide-react"
 import { Suspense } from "react"
 import Sidebar from "./_components/Sidebar"
 import BedwarsStats from "./_stats/bedwars/bedwars"
+import SkyWarsStats from "./_stats/skywars/skywars"
 
 export default async function PlayerPage({
     params
@@ -73,6 +74,7 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
                 <Sidebar level={level} ign={pign} player={player} guild={guild ?? undefined} />
                 <div className="space-y-4 w-3/4">
                     <BedwarsStats stats={player.stats.Bedwars} />
+                    <SkyWarsStats stats={player.stats.SkyWars} />
                 </div>
             </div>
         </div>