Added smash heros stat table

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

@@ -5,6 +5,7 @@ import { getSmashHerosDifficultyColor, getSmashHerosMostPlayedHero } from "@/lib
 import { NonNullStats } from "@/lib/schema/player"
 import GeneralStats from "../GeneralStats"
 import SmashHerosGeneralStats from "./stats"
+import { SmashHerosModeTable } from "./table"
 
 export default function SmashHerosStats({ stats }: { stats: NonNullStats["SmashHeros"] }) {
     if (!stats) return null
@@ -49,6 +50,8 @@ export default function SmashHerosStats({ stats }: { stats: NonNullStats["SmashH
             <Separator className="my-4" />
             <SmashHerosGeneralStats stats={stats} />
             <Separator className="my-4" />
+            <SmashHerosModeTable stats={stats} />
+            <Separator className="my-4" />
         </GeneralStats>
     )
 }

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

@@ -0,0 +1,58 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { formatNumber } from "@/lib/formatters"
+import { getSmashHerosModeName, getSmashHerosModeStats, getSmashHerosMostPlayedMode } from "@/lib/hypixel/smashhero/general"
+import { NonNullStats } from "@/lib/schema/player"
+import { cn } from "@/lib/utils"
+
+export function SmashHerosModeTable({ stats }: { stats: NonNullable<NonNullStats["SmashHeros"]> }) {
+    return (
+        <Table>
+            <SmashHerosModeTableHeader />
+            <TableBody>
+                <SmashHerosModeTableStat modeId="normal" stats={stats} />
+                <SmashHerosModeTableStat modeId="2v2" stats={stats} />
+                <SmashHerosModeTableStat modeId="teams" stats={stats} />
+                <SmashHerosModeTableStat modeId="all" stats={stats} />
+            </TableBody>
+        </Table>
+    )
+}
+
+function SmashHerosModeTableStat(
+    { modeId, stats }: { modeId: Parameters<typeof getSmashHerosModeStats>[0], stats: NonNullable<NonNullStats["SmashHeros"]> }
+) {
+    const modeStats = getSmashHerosModeStats(modeId, stats)
+    const modeName = getSmashHerosModeName(modeId)
+    const mostPlayed = getSmashHerosMostPlayedMode(stats) === modeId
+
+    return (
+        <TableRow className={cn(mostPlayed && "text-mc-light-purple", modeId === "all" && "font-bold")}>
+            <TableCell>{modeName}</TableCell>
+            {modeStats.map((v, i) => {
+                return <TableCell key={i}>{formatNumber(v)}</TableCell>
+            })}
+        </TableRow>
+    )
+}
+
+function SmashHerosModeTableHeader() {
+    const headerElements = [
+        "Mode",
+        "Kills",
+        "Deaths",
+        "KD",
+        "Wins",
+        "Losses",
+        "WL"
+    ]
+
+    return (
+        <TableHeader>
+            <TableRow>
+                {headerElements.map((v, i) => {
+                    return <TableHead key={i} className="font-bold">{v}</TableHead>
+                })}
+            </TableRow>
+        </TableHeader>
+    )
+}