Added tooltip to heads

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

@@ -0,0 +1,56 @@
+"use client"
+
+import { getHeads } from "@/lib/hypixel/skywars/skywars"
+import { cn } from "@/lib/utils"
+import { useEffect, useState } from "react"
+import { Tooltip } from "react-tooltip"
+
+export function HeadsBar({ heads, heads_total }: { heads: [string, number][], heads_total: number }) {
+    const [pos, setPos] = useState({ x: 0, y: 0 })
+
+    useEffect(() => {
+        const controller = new AbortController()
+
+        window.addEventListener("mousemove", (e) => {
+            if (!(e.target instanceof HTMLDivElement)) return
+            if (e.target.dataset.id !== "heads-bar") return
+
+            setPos({ x: e.clientX, y: e.clientY - 10 })
+        }, { signal: controller.signal })
+
+        return () => {
+            controller.abort()
+        }
+    })
+
+    return (
+        <>
+            <div className="flex mt-2">
+                {heads.map(([key, total], index) => {
+                    const head = getHeads(key)
+                    const percent = heads_total === 0 ? 0 : total / heads_total
+
+                    return (
+                        <div
+                            data-id="heads-bar"
+                            data-tooltip-id="heads-bar"
+                            data-tooltip-content={`${total} ${head === null ? "Undefined" : head.name} heads`}
+                            key={key}
+                            className={cn(
+                                "h-5",
+                                head === null ? "bg-background" : `bg-mc-${head.color}`,
+                                index === 0 ? "rounded-l-md" : undefined,
+                                index === heads.length - 1 ? "rounded-r-md" : undefined
+                            )}
+                            style={{
+                                width: `${percent * 100}%`
+                            }}
+                        >
+                        </div>
+                    )
+                })}
+            </div>
+            <Tooltip id="heads-bar" position={pos} />
+        </>
+    )
+}