Finished smash heros card header

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

@@ -0,0 +1,51 @@
+import { Separator } from "@/components/ui/separator"
+import { formatNumber } from "@/lib/formatters"
+import { devide } from "@/lib/hypixel/general"
+import { getSmashHerosDifficultyColor, getSmashHerosMostPlayedHero } from "@/lib/hypixel/smashhero/general"
+import { NonNullStats } from "@/lib/schema/player"
+import GeneralStats from "../GeneralStats"
+
+export default function SmashHerosStats({ stats }: { stats: NonNullStats["SmashHeros"] }) {
+    if (!stats) return null
+
+    const kd = formatNumber(devide(stats.kills, stats.deaths))
+    const wl = formatNumber(devide(stats.wins, stats.losses))
+    const mostPlayed = getSmashHerosMostPlayedHero(stats)
+    const diffiultyColor = getSmashHerosDifficultyColor(mostPlayed?.difficulty ?? 0)
+
+    return (
+        <GeneralStats
+            id="smashheros"
+            title="Smash Heros"
+            collapsedStats={[
+                {
+                    title: <p>Main</p>,
+                    stat: <p className={`text-mc-${diffiultyColor}`}>{mostPlayed !== null ? mostPlayed.name : "Unknown"}</p>
+                },
+                {
+                    title: <p>Level</p>,
+                    stat: (
+                        <p>
+                            <span className="text-mc-aqua">{stats.smashLevel}</span>
+                            <span className="text-mc-gold">{"\u2736"}</span>
+                        </p>
+                    )
+                },
+                {
+                    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>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+        </GeneralStats>
+    )
+}