Added a general stats component

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

@@ -0,0 +1,31 @@
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Card, CardContent } from "@/components/ui/card"
+import { ReactNode } from "react"
+import CollapsedStats from "../_components/CollapsedStats"
+
+export default function GeneralStats(
+    { id, title, children, collapsedStats }: {
+        id: string
+        title: string
+        children: ReactNode
+        collapsedStats: Parameters<typeof CollapsedStats>[0]["stats"]
+    }
+) {
+    return (
+        <AccordionItem value={id}>
+            <Card className="py-0">
+                <CardContent>
+                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
+                        <h1 className="text-xl font-bold">{title}</h1>
+                        <div className="flex gap-4">
+                            <CollapsedStats stats={collapsedStats} />
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                        {children}
+                    </AccordionContent>
+                </CardContent>
+            </Card>
+        </AccordionItem>
+    )
+}

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

@@ -1,11 +1,9 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { getBedwarsLevelForExp, getTotalBedwarsExpForLevel } from "@/lib/hypixel/bedwars/level"
 import { devide, getProgress } from "@/lib/hypixel/general"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import { BedwarsLevel, BedwarsProgress } from "./components"
 import BedwarsGeneralStats from "./stats"
 import BedwarsStatTable from "./table"
@@ -27,51 +25,41 @@ export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"]
     const ceilingXp = next - current
 
     return (
-        <AccordionItem value="bedwars">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">BedWars</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Level</p>,
-                                        stat: <BedwarsLevel xp={stats.Experience} />
-                                    },
-                                    {
-                                        title: <p>WS</p>,
-                                        stat: <p className="text-muted-foreground">{stats.winstreak ?? "?"}</p>
-                                    },
-                                    {
-                                        title: <p>KD</p>,
-                                        stat: <p className="text-muted-foreground">{kd}</p>
-                                    },
-                                    {
-                                        title: <p>FKD</p>,
-                                        stat: <p className="text-muted-foreground">{fkd}</p>
-                                    },
-                                    {
-                                        title: <p>WL</p>,
-                                        stat: <p className="text-muted-foreground">{wl}</p>
-                                    },
-                                    {
-                                        title: <p>BBL</p>,
-                                        stat: <p className="text-muted-foreground">{bbl}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <BedwarsProgress level={level} percent={percent} currentXp={xpProgress} ceilingXp={ceilingXp} />
-                        <BedwarsGeneralStats stats={stats} level={level} percent={percent} bbl={bbl} kd={kd} fkd={fkd} wl={wl} />
-                        <Separator className="my-4" />
-                        <BedwarsStatTable stats={stats} />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="bedwars"
+            title="BedWars"
+            collapsedStats={[
+                {
+                    title: <p>Level</p>,
+                    stat: <BedwarsLevel xp={stats.Experience} />
+                },
+                {
+                    title: <p>WS</p>,
+                    stat: <p className="text-muted-foreground">{stats.winstreak ?? "?"}</p>
+                },
+                {
+                    title: <p>KD</p>,
+                    stat: <p className="text-muted-foreground">{kd}</p>
+                },
+                {
+                    title: <p>FKD</p>,
+                    stat: <p className="text-muted-foreground">{fkd}</p>
+                },
+                {
+                    title: <p>WL</p>,
+                    stat: <p className="text-muted-foreground">{wl}</p>
+                },
+                {
+                    title: <p>BBL</p>,
+                    stat: <p className="text-muted-foreground">{bbl}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <BedwarsProgress level={level} percent={percent} currentXp={xpProgress} ceilingXp={ceilingXp} />
+            <BedwarsGeneralStats stats={stats} level={level} percent={percent} bbl={bbl} kd={kd} fkd={fkd} wl={wl} />
+            <Separator className="my-4" />
+            <BedwarsStatTable stats={stats} />
+        </GeneralStats>
     )
 }

src/app/(stats)/player/[ign]/_stats/build-battle/build-battle.tsx

@@ -1,11 +1,9 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { getBuildBattleRank } from "@/lib/hypixel/build-battle/general"
 import { NonNullStats } from "@/lib/schema/player"
 import { cn } from "@/lib/utils"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import BuildBattleTitleProgress from "./progress"
 import BuildBattleGeneralStats from "./stats"
 import BuildBattleStatsTable from "./table"
@@ -16,37 +14,27 @@ export default function BuildBattleStats({ stats }: { stats: NonNullStats["Build
     const rank = getBuildBattleRank(stats.score)
 
     return (
-        <AccordionItem value="build-battle">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">Build Battle</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Title</p>,
-                                        stat: <p className={cn(rank.bold && "font-bold", `text-mc-${rank.color}`)}>{rank.name}</p>
-                                    },
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <BuildBattleTitleProgress score={stats.score} />
-                        <Separator className="my-4" />
-                        <BuildBattleGeneralStats stats={stats} />
-                        <Separator className="my-4" />
-                        <BuildBattleStatsTable stats={stats} />
-                        <Separator className="my-4" />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="build-battle"
+            title="Build Battle"
+            collapsedStats={[
+                {
+                    title: <p>Title</p>,
+                    stat: <p className={cn(rank.bold && "font-bold", `text-mc-${rank.color}`)}>{rank.name}</p>
+                },
+                {
+                    title: <p>Wins</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <BuildBattleTitleProgress score={stats.score} />
+            <Separator className="my-4" />
+            <BuildBattleGeneralStats stats={stats} />
+            <Separator className="my-4" />
+            <BuildBattleStatsTable stats={stats} />
+            <Separator className="my-4" />
+        </GeneralStats>
     )
 }

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

@@ -1,11 +1,9 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { getCopsAndCrimsScoreColor } from "@/lib/hypixel/copsandcrims/general"
 import { devide } from "@/lib/hypixel/general"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import CopsAndCrimsGeneralStats from "./stats"
 import CopsAndCrimsStatTable from "./table"
 import CopsAndCrimsWeaponStats from "./weapons"
@@ -22,45 +20,35 @@ export default function CopsAndCrimsStats({ stats }: { stats: NonNullStats["Cops
     const scoreColor = getCopsAndCrimsScoreColor(score)
 
     return (
-        <AccordionItem value="cops-and-crims">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">Cops And Crims</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Score</p>,
-                                        stat: <p className={`text-mc-${scoreColor}`}>{formatNumber(score)}</p>
-                                    },
-                                    {
-                                        title: <p>Kills</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(kills)}</p>
-                                    },
-                                    {
-                                        title: <p>KD</p>,
-                                        stat: <p className="text-muted-foreground">{kd}</p>
-                                    },
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(wins)}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <CopsAndCrimsGeneralStats stats={stats} wins={wins} kills={kills} assits={assists} deaths={deaths} />
-                        <Separator className="my-4" />
-                        <CopsAndCrimsStatTable stats={stats} />
-                        <Separator className="my-4" />
-                        <CopsAndCrimsWeaponStats stats={stats} />
-                        <Separator className="my-4" />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="cops-and-crims"
+            title="Cops And Crims"
+            collapsedStats={[
+                {
+                    title: <p>Score</p>,
+                    stat: <p className={`text-mc-${scoreColor}`}>{formatNumber(score)}</p>
+                },
+                {
+                    title: <p>Kills</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(kills)}</p>
+                },
+                {
+                    title: <p>KD</p>,
+                    stat: <p className="text-muted-foreground">{kd}</p>
+                },
+                {
+                    title: <p>Wins</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(wins)}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <CopsAndCrimsGeneralStats stats={stats} wins={wins} kills={kills} assits={assists} deaths={deaths} />
+            <Separator className="my-4" />
+            <CopsAndCrimsStatTable stats={stats} />
+            <Separator className="my-4" />
+            <CopsAndCrimsWeaponStats stats={stats} />
+            <Separator className="my-4" />
+        </GeneralStats>
     )
 }

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

@@ -1,11 +1,9 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { getAllDuelsDivisions, getDuelsMostPlayed } from "@/lib/hypixel/duels/duels"
 import { devide, romanize } from "@/lib/hypixel/general"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import DuelsGeneralStats from "./stats"
 import DuelsStatsTable from "./table"
 
@@ -18,63 +16,53 @@ export default function DuelsStats({ stats }: { stats: NonNullStats["Duels"] })
     const mostPlayed = getDuelsMostPlayed(stats)
 
     return (
-        <AccordionItem value="duels">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">Duels</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Division</p>,
-                                        stat: (
-                                            <p>
-                                                {div !== null ?
-                                                    (
-                                                        <span className={`text-mc-${div.color}`}>
-                                                            {`${div.name} ${romanize(div.level)}`}
-                                                        </span>
-                                                    ) :
-                                                    <span className="text-muted-foreground">-</span>}
-                                            </p>
-                                        )
-                                    },
+        <GeneralStats
+            id="duels"
+            title="Duels"
+            collapsedStats={[
+                {
+                    title: <p>Division</p>,
+                    stat: (
+                        <p>
+                            {div !== null ?
+                                (
+                                    <span className={`text-mc-${div.color}`}>
+                                        {`${div.name} ${romanize(div.level)}`}
+                                    </span>
+                                ) :
+                                <span className="text-muted-foreground">-</span>}
+                        </p>
+                    )
+                },
 
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: (
-                                            <p className="font-bold">
-                                                {mostPlayed !== null ?
-                                                    (
-                                                        <span>
-                                                            {mostPlayed.name}
-                                                        </span>
-                                                    ) :
-                                                    <span className="text-muted-foreground">-</span>}
-                                            </p>
-                                        )
-                                    },
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
-                                    },
-                                    {
-                                        title: <p>WL</p>,
-                                        stat: <p className="text-muted-foreground">{wl}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <DuelsGeneralStats stats={stats} div={div} kd={kd} wl={wl} />
-                        <Separator className="my-4" />
-                        <DuelsStatsTable stats={stats} />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+                {
+                    title: <p>Wins</p>,
+                    stat: (
+                        <p className="font-bold">
+                            {mostPlayed !== null ?
+                                (
+                                    <span>
+                                        {mostPlayed.name}
+                                    </span>
+                                ) :
+                                <span className="text-muted-foreground">-</span>}
+                        </p>
+                    )
+                },
+                {
+                    title: <p>Wins</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
+                },
+                {
+                    title: <p>WL</p>,
+                    stat: <p className="text-muted-foreground">{wl}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <DuelsGeneralStats stats={stats} div={div} kd={kd} wl={wl} />
+            <Separator className="my-4" />
+            <DuelsStatsTable stats={stats} />
+        </GeneralStats>
     )
 }

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

@@ -1,12 +1,10 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { devide } from "@/lib/hypixel/general"
 import { getMegaWallsDifficultyColor, getMegawallsMostPlayed } from "@/lib/hypixel/megawalls/general"
 import { NonNullStats } from "@/lib/schema/player"
 import { cn } from "@/lib/utils"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import MegaWallsGeneralStats from "./stats"
 import { MegaWallsClassesTable, MegaWallsModesTable } from "./table"
 
@@ -20,53 +18,43 @@ export default function MegaWallsStats({ stats }: { stats: NonNullStats["MegaWal
     const difficultyColor = getMegaWallsDifficultyColor(mostPlayed !== null ? mostPlayed.difficulty : 1)
 
     return (
-        <AccordionItem value="megawalls">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">Mega Walls</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Main</p>,
-                                        stat: (
-                                            <p className={cn(mostPlayed && `text-mc-${difficultyColor}`)}>
-                                                {mostPlayed !== null ? mostPlayed.name : "Unknown"}
-                                            </p>
-                                        )
-                                    },
-                                    {
-                                        title: <p>KD</p>,
-                                        stat: <p className="text-muted-foreground">{kd}</p>
-                                    },
-                                    {
-                                        title: <p>FKD</p>,
-                                        stat: <p className="text-muted-foreground">{fkd}</p>
-                                    },
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
-                                    },
-                                    {
-                                        title: <p>WL</p>,
-                                        stat: <p className="text-muted-foreground">{wl}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <MegaWallsGeneralStats stats={stats} />
-                        <Separator className="my-4" />
-                        <MegaWallsClassesTable stats={stats} />
-                        <Separator className="my-4" />
-                        <MegaWallsModesTable stats={stats} />
-                        <Separator className="my-4" />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="megawalls"
+            title="Mega Walls"
+            collapsedStats={[
+                {
+                    title: <p>Main</p>,
+                    stat: (
+                        <p className={cn(mostPlayed && `text-mc-${difficultyColor}`)}>
+                            {mostPlayed !== null ? mostPlayed.name : "Unknown"}
+                        </p>
+                    )
+                },
+                {
+                    title: <p>KD</p>,
+                    stat: <p className="text-muted-foreground">{kd}</p>
+                },
+                {
+                    title: <p>FKD</p>,
+                    stat: <p className="text-muted-foreground">{fkd}</p>
+                },
+                {
+                    title: <p>Wins</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
+                },
+                {
+                    title: <p>WL</p>,
+                    stat: <p className="text-muted-foreground">{wl}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <MegaWallsGeneralStats stats={stats} />
+            <Separator className="my-4" />
+            <MegaWallsClassesTable stats={stats} />
+            <Separator className="my-4" />
+            <MegaWallsModesTable stats={stats} />
+            <Separator className="my-4" />
+        </GeneralStats>
     )
 }

src/app/(stats)/player/[ign]/_stats/murder-mystery/murder-mystery.tsx

@@ -1,9 +1,7 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import InfectionStats from "./infection"
 import MurderMysteryGeneralStats from "./stats"
 import MurderMysteryStatTable from "./table"
@@ -12,37 +10,27 @@ export default function MurderMysteryStats({ stats }: { stats: NonNullStats["Mur
     if (!stats) return null
 
     return (
-        <AccordionItem value="murder-mystery">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">Murder Mystery</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Kills</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(stats.kills)}</p>
-                                    },
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <MurderMysteryGeneralStats stats={stats} />
-                        <Separator className="my-4" />
-                        <InfectionStats stats={stats} />
-                        <Separator className="my-4" />
-                        <MurderMysteryStatTable stats={stats} />
-                        <Separator className="my-4" />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="murder-mystery"
+            title="Murder Mystery"
+            collapsedStats={[
+                {
+                    title: <p>Kills</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(stats.kills)}</p>
+                },
+                {
+                    title: <p>Wins</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <MurderMysteryGeneralStats stats={stats} />
+            <Separator className="my-4" />
+            <InfectionStats stats={stats} />
+            <Separator className="my-4" />
+            <MurderMysteryStatTable stats={stats} />
+            <Separator className="my-4" />
+        </GeneralStats>
     )
 }

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

@@ -1,11 +1,9 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { devide } from "@/lib/hypixel/general"
 import { getPitPrestige } from "@/lib/hypixel/pit/general"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import PitLevel from "./level"
 import PitProgress from "./progress"
 import PitGeneralStats from "./stats"
@@ -17,39 +15,29 @@ export default function PitStats({ stats }: { stats: NonNullStats["Pit"] }) {
     const prestige = getPitPrestige(stats)
 
     return (
-        <AccordionItem value="pit">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">Pit</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Level</p>,
-                                        stat: <PitLevel xp={stats.profile.xp} prestige={prestige} />
-                                    },
-                                    {
-                                        title: <p>Kills</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(stats.kills)}</p>
-                                    },
-                                    {
-                                        title: <p>KD</p>,
-                                        stat: <p className="text-muted-foreground">{kd}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <PitProgress prestige={prestige} xp={stats.profile.xp} />
-                        <Separator className="my-4" />
-                        <PitGeneralStats stats={stats} />
-                        <Separator className="my-4" />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="pit"
+            title="Pit"
+            collapsedStats={[
+                {
+                    title: <p>Level</p>,
+                    stat: <PitLevel xp={stats.profile.xp} prestige={prestige} />
+                },
+                {
+                    title: <p>Kills</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(stats.kills)}</p>
+                },
+                {
+                    title: <p>KD</p>,
+                    stat: <p className="text-muted-foreground">{kd}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <PitProgress prestige={prestige} xp={stats.profile.xp} />
+            <Separator className="my-4" />
+            <PitGeneralStats stats={stats} />
+            <Separator className="my-4" />
+        </GeneralStats>
     )
 }

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

@@ -1,11 +1,9 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { devide, getProgress } from "@/lib/hypixel/general"
 import { getSkywarsLevel, getSkywarsXpForLevel } from "@/lib/hypixel/skywars/level"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import { AngelOfDeath, ShardProgress, SkywarsHeads, SkywarsLevel, SkywarsProgress } from "./components"
 import SkyWarsGeneralStats from "./stats"
 import SkywarsStatTable from "./table"
@@ -34,79 +32,69 @@ export default function SkyWarsStats(
     const shardProgress = getProgress(0, stats.shard, 20000)
 
     return (
-        <AccordionItem value="skywars">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <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 className="text-muted-foreground">{kd}</p>
-                                    },
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
-                                    },
-                                    {
-                                        title: <p>WL</p>,
-                                        stat: <p className="text-muted-foreground">{wl}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <SkywarsProgress level={Math.floor(level)} percent={levelProgress} currentXp={xpProgress} ceilingXp={ceilingXp} />
-                        <SkyWarsGeneralStats stats={stats} level={level} />
-                        <Separator className="my-4" />
-                        <SkywarsStatTable stats={stats} />
-                        <Separator className="my-4" />
-                        <div className="space-y-2">
-                            <ShardProgress percent={shardProgress} shards={stats.shard} />
-                            <AngelOfDeath
-                                shards={stats.shard}
-                                lifetime_shards={achievements_skywars_opal_obsession * 20000 + stats.shard}
-                                opals={stats.opals}
-                                lifetime_opals={achievements_skywars_opal_obsession}
-                            />
-                            <SkywarsHeads
-                                heads={stats.heads}
-                                heads_special={{
-                                    heavenly: stats.heads_heavenly,
-                                    divine: stats.heads_divine,
-                                    decent: stats.heads_decent,
-                                    eww: stats.heads_eww,
-                                    meh: stats.heads_meh,
-                                    salty: stats.heads_salty,
-                                    succulent: stats.heads_succulent,
-                                    sweet: stats.heads_sweet,
-                                    tasty: stats.heads_tasty,
-                                    yucky: stats.heads_yucky
-                                }}
-                                prestigeous={stats.head_collection === undefined
-                                    ? []
-                                    : stats.head_collection.prestigious.map(v => {
-                                        if (v.username === null) return null
+        <GeneralStats
+            id="skywars"
+            title="SkyWars"
+            collapsedStats={[
+                {
+                    title: <p>Level</p>,
+                    stat: <SkywarsLevel xp={stats.skywars_experience} icon={stats.selected_prestige_icon} />
+                },
+                {
+                    title: <p>KD</p>,
+                    stat: <p className="text-muted-foreground">{kd}</p>
+                },
+                {
+                    title: <p>Wins</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
+                },
+                {
+                    title: <p>WL</p>,
+                    stat: <p className="text-muted-foreground">{wl}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <SkywarsProgress level={Math.floor(level)} percent={levelProgress} currentXp={xpProgress} ceilingXp={ceilingXp} />
+            <SkyWarsGeneralStats stats={stats} level={level} />
+            <Separator className="my-4" />
+            <SkywarsStatTable stats={stats} />
+            <Separator className="my-4" />
+            <div className="space-y-2">
+                <ShardProgress percent={shardProgress} shards={stats.shard} />
+                <AngelOfDeath
+                    shards={stats.shard}
+                    lifetime_shards={achievements_skywars_opal_obsession * 20000 + stats.shard}
+                    opals={stats.opals}
+                    lifetime_opals={achievements_skywars_opal_obsession}
+                />
+                <SkywarsHeads
+                    heads={stats.heads}
+                    heads_special={{
+                        heavenly: stats.heads_heavenly,
+                        divine: stats.heads_divine,
+                        decent: stats.heads_decent,
+                        eww: stats.heads_eww,
+                        meh: stats.heads_meh,
+                        salty: stats.heads_salty,
+                        succulent: stats.heads_succulent,
+                        sweet: stats.heads_sweet,
+                        tasty: stats.heads_tasty,
+                        yucky: stats.heads_yucky
+                    }}
+                    prestigeous={stats.head_collection === undefined
+                        ? []
+                        : stats.head_collection.prestigious.map(v => {
+                            if (v.username === null) return null
 
-                                        return {
-                                            username: v.username,
-                                            timestamp: v.timestamp,
-                                            sacrifice: v.sacrifice
-                                        }
-                                    }).filter(v => v !== null)}
-                            />
-                        </div>
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+                            return {
+                                username: v.username,
+                                timestamp: v.timestamp,
+                                sacrifice: v.sacrifice
+                            }
+                        }).filter(v => v !== null)}
+                />
+            </div>
+        </GeneralStats>
     )
 }

src/app/(stats)/player/[ign]/_stats/tnt-games/tnt-games.tsx

@@ -1,8 +1,6 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import TNTGamesGeneralStats from "./stats"
 import TNTWizardsStats from "./wizards"
 
@@ -10,28 +8,18 @@ export default function TNTGamesStats({ stats }: { stats: NonNullStats["TNTGames
     if (!stats) return null
 
     return (
-        <AccordionItem value="tnt-games">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">TNT Games</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[{
-                                    title: <p>Wins</p>,
-                                    stat: <p className="text-muted-foreground">{stats.wins}</p>
-                                }]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <TNTGamesGeneralStats stats={stats} />
-                        <Separator className="my-4" />
-                        <TNTWizardsStats stats={stats} />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="tnt-games"
+            title="TNT Games"
+            collapsedStats={[{
+                title: <p>Wins</p>,
+                stat: <p className="text-muted-foreground">{stats.wins}</p>
+            }]}
+        >
+            <Separator className="my-4" />
+            <TNTGamesGeneralStats stats={stats} />
+            <Separator className="my-4" />
+            <TNTWizardsStats stats={stats} />
+        </GeneralStats>
     )
 }

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

@@ -1,12 +1,10 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { devide } from "@/lib/hypixel/general"
 import { getUHCStatsCombined } from "@/lib/hypixel/uhc/general"
 import { getUhcStarValue } from "@/lib/hypixel/uhc/level"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 import UHCProgress from "./progress"
 import UHCGeneralStats from "./stats"
 import UHCStatTable from "./table"
@@ -19,40 +17,30 @@ export default function UHCStats({ stats }: { stats: NonNullStats["UHC"] }) {
     const star = getUhcStarValue(stats.score)
 
     return (
-        <AccordionItem value="uhc">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">UHC</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats
-                                stats={[
-                                    {
-                                        title: <p>Star</p>,
-                                        stat: <p className="text-mc-gold">{`[${star}✫]`}</p>
-                                    },
-                                    {
-                                        title: <p>KD</p>,
-                                        stat: <p className="text-muted-foreground">{kd}</p>
-                                    },
-                                    {
-                                        title: <p>Wins</p>,
-                                        stat: <p className="text-muted-foreground">{formatNumber(combined.wins)}</p>
-                                    }
-                                ]}
-                            />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                        <UHCProgress score={stats.score} />
-                        <Separator className="my-4" />
-                        <UHCGeneralStats stats={stats} kills={combined.kills} deaths={combined.deaths} heads={combined.heads} wins={combined.wins} />
-                        <Separator className="my-4" />
-                        <UHCStatTable stats={stats} />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="uhc"
+            title="UHC"
+            collapsedStats={[
+                {
+                    title: <p>Star</p>,
+                    stat: <p className="text-mc-gold">{`[${star}✫]`}</p>
+                },
+                {
+                    title: <p>KD</p>,
+                    stat: <p className="text-muted-foreground">{kd}</p>
+                },
+                {
+                    title: <p>Wins</p>,
+                    stat: <p className="text-muted-foreground">{formatNumber(combined.wins)}</p>
+                }
+            ]}
+        >
+            <Separator className="my-4" />
+            <UHCProgress score={stats.score} />
+            <Separator className="my-4" />
+            <UHCGeneralStats stats={stats} kills={combined.kills} deaths={combined.deaths} heads={combined.heads} wins={combined.wins} />
+            <Separator className="my-4" />
+            <UHCStatTable stats={stats} />
+        </GeneralStats>
     )
 }

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

@@ -1,27 +1,17 @@
-import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Card, CardContent } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { NonNullStats } from "@/lib/schema/player"
-import CollapsedStats from "../../_components/CollapsedStats"
+import GeneralStats from "../GeneralStats"
 
 export default function WoolGamesStats({ stats }: { stats: NonNullStats["WoolGames"] }) {
     if (!stats) return null
 
     return (
-        <AccordionItem value="woolgames">
-            <Card className="py-0">
-                <CardContent>
-                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
-                        <h1 className="text-xl font-bold">Wool Games</h1>
-                        <div className="flex gap-4">
-                            <CollapsedStats stats={[]} />
-                        </div>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                        <Separator className="my-4" />
-                    </AccordionContent>
-                </CardContent>
-            </Card>
-        </AccordionItem>
+        <GeneralStats
+            id="woolgames"
+            title="Wool Games"
+            collapsedStats={[]}
+        >
+            <Separator className="my-4" />
+        </GeneralStats>
     )
 }