Finished smash heros card header

src/app/(main)/settings/page.tsx

@@ -2,7 +2,7 @@ import ClearCookiesButton from "@/components/clear-cookies"
 
 export default function SettingsPage() {
     return (
-        <div className="p-8 space-y-4">
+        <div className="px-8 pb-8 space-y-4 pt-[calc(var(--spacing-header)+2rem)]">
             <div>
                 <h2 className="text-2xl font-bold">Cookies</h2>
                 <p>The site stores cookies to save prefrences. If you wish to delete these cookies use the bottom bellow.</p>

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

@@ -22,6 +22,7 @@ import MegaWallsStats from "./_stats/megawalls/megawalls"
 import MurderMysteryStats from "./_stats/murder-mystery/murder-mystery"
 import PitStats from "./_stats/pit/pit"
 import SkyWarsStats from "./_stats/skywars/skywars"
+import SmashHerosStats from "./_stats/smashheros/smashheros"
 import SpeedUHCStats from "./_stats/speeduhc/speeduhc"
 import TNTGamesStats from "./_stats/tnt-games/tnt-games"
 import UHCStats from "./_stats/uhc/uhc"
@@ -94,7 +95,8 @@ export function PlayerStats(
         "woolgames": <WoolGamesStats stats={stats.WoolGames} />,
         "blitz": <BlitzStats stats={stats.Blitz} />,
         "arcade": <ArcadeStats stats={stats.Arcade} />,
-        "speeduhc": <SpeedUHCStats stats={stats.SpeedUHC} uhcCoins={stats.UHC?.coins} />
+        "speeduhc": <SpeedUHCStats stats={stats.SpeedUHC} uhcCoins={stats.UHC?.coins} />,
+        "smashheros": <SmashHerosStats stats={stats.SmashHeros} />
     } as const
 
     const defaultOrder = Object.keys(statsComponents)

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>
+    )
+}