Replaced collapsible with accordion

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

@@ -1,42 +1,17 @@
 "use client"
 
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
 import { Card, CardContent } from "@/components/ui/card"
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { Separator } from "@/components/ui/separator"
 import { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwars/level"
 import { getProgress } from "@/lib/hypixel/general"
 import { NonNullStats } from "@/lib/schema/player"
-import { ChevronDown, ChevronUp } from "lucide-react"
-import { useEffect, useRef, useState } from "react"
 import CollapsedStats from "../../_components/CollapsedStats"
 import { BedwarsLevel, BedwarsProgress } from "./components"
 import BedwarsGeneralStats from "./stats"
 import BedwarsStatTable from "./table"
 
 export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"] }) {
-    const ref = useRef<HTMLDivElement>(null)
-    const [opened, setOpened] = useState(false)
-
-    useEffect(() => {
-        if (!ref.current) return
-
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === "attributes" && mutation.attributeName === "data-state") {
-                    const dataState = ref.current?.getAttribute("data-state")
-                    setOpened(dataState === "open")
-                }
-            })
-        })
-
-        observer.observe(ref.current, {
-            attributes: true,
-            attributeFilter: ["data-state"]
-        })
-
-        return () => observer.disconnect()
-    }, [])
-
     if (!stats) return null
 
     const kd = (stats.kills_bedwars / stats.deaths_bedwars).toFixed(2)
@@ -53,10 +28,10 @@ export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"]
     const ceilingXp = next - current
 
     return (
-        <Card>
-            <CardContent>
-                <Collapsible ref={ref}>
-                    <div className="flex justify-between">
+        <AccordionItem value="bedwars">
+            <Card className="py-0">
+                <CardContent>
+                    <AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
                         <h1 className="text-xl font-bold">BedWars</h1>
                         <div className="flex gap-4">
                             <CollapsedStats
@@ -88,19 +63,16 @@ export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"]
                                 ]}
                             />
                         </div>
-                        <CollapsibleTrigger className="transition-all">
-                            {opened === false ? <ChevronDown /> : <ChevronUp />}
-                        </CollapsibleTrigger>
-                    </div>
-                    <CollapsibleContent>
+                    </AccordionTrigger>
+                    <AccordionContent>
                         <Separator className="my-4" />
                         <BedwarsProgress level={level} percent={percent} currentXp={xpProgress} ceilingXp={ceilingXp} />
                         <BedwarsGeneralStats statsChecked={stats} level={level} percent={percent} bbl={bbl} kd={kd} fkd={fkd} wl={wl} />
                         <Separator className="my-4" />
                         <BedwarsStatTable stats={stats} />
-                    </CollapsibleContent>
-                </Collapsible>
-            </CardContent>
-        </Card>
+                    </AccordionContent>
+                </CardContent>
+            </Card>
+        </AccordionItem>
     )
 }

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

@@ -1,14 +1,12 @@
 "use client"
 
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
 import { Card, CardContent } from "@/components/ui/card"
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { Separator } from "@/components/ui/separator"
 import { formatNumber } from "@/lib/formatters"
 import { getProgress } from "@/lib/hypixel/general"
 import { getSkywarsLevel, getSkywarsXpForLevel } from "@/lib/hypixel/skywars/level"
 import { NonNullStats } from "@/lib/schema/player"
-import { ChevronDown, ChevronUp } from "lucide-react"
-import { useEffect, useRef, useState } from "react"
 import CollapsedStats from "../../_components/CollapsedStats"
 import { AngelOfDeath, ShardProgress, SkywarsHeads, SkywarsLevel, SkywarsProgress } from "./components"
 import SkyWarsGeneralStats from "./stats"
@@ -17,29 +15,6 @@ import SkywarsStatTable from "./table"
 export default function SkyWarsStats(
     { stats, achievements_skywars_opal_obsession }: { stats: NonNullStats["SkyWars"], achievements_skywars_opal_obsession: number }
 ) {
-    const ref = useRef<HTMLDivElement>(null)
-    const [opened, setOpened] = useState(false)
-
-    useEffect(() => {
-        if (!ref.current) return
-
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === "attributes" && mutation.attributeName === "data-state") {
-                    const dataState = ref.current?.getAttribute("data-state")
-                    setOpened(dataState === "open")
-                }
-            })
-        })
-
-        observer.observe(ref.current, {
-            attributes: true,
-            attributeFilter: ["data-state"]
-        })
-
-        return () => observer.disconnect()
-    }, [])
-
     if (!stats) return null
 
     const level = getSkywarsLevel(stats.skywars_experience)
@@ -61,10 +36,10 @@ export default function SkyWarsStats(
     const shardProgress = getProgress(0, stats.shard, 20000)
 
     return (
-        <Card>
-            <CardContent>
-                <Collapsible ref={ref}>
-                    <div className="flex justify-between">
+        <AccordionItem value="skywars">
+            <Card className="py-0">
+                <CardContent>
+                    <AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
                         <h1 className="text-xl font-bold">SkyWars</h1>
                         <div className="flex gap-4">
                             <CollapsedStats
@@ -88,11 +63,8 @@ export default function SkyWarsStats(
                                 ]}
                             />
                         </div>
-                        <CollapsibleTrigger className="transition-all">
-                            {opened === false ? <ChevronDown /> : <ChevronUp />}
-                        </CollapsibleTrigger>
-                    </div>
-                    <CollapsibleContent>
+                    </AccordionTrigger>
+                    <AccordionContent>
                         <Separator className="my-4" />
                         <SkywarsProgress level={Math.floor(level)} percent={levelProgress} currentXp={xpProgress} ceilingXp={ceilingXp} />
                         <SkyWarsGeneralStats statsChecked={stats} level={level} />
@@ -130,9 +102,9 @@ export default function SkyWarsStats(
                                 })}
                             />
                         </div>
-                    </CollapsibleContent>
-                </Collapsible>
-            </CardContent>
-        </Card>
+                    </AccordionContent>
+                </CardContent>
+            </Card>
+        </AccordionItem>
     )
 }

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

@@ -1,4 +1,5 @@
 import DisplayName from "@/components/player/displayname"
+import { Accordion } from "@/components/ui/accordion"
 import { Card, CardContent } from "@/components/ui/card"
 import { getGuild } from "@/lib/hypixel/api/guild"
 import { getUuid } from "@/lib/hypixel/api/mojang"
@@ -83,12 +84,14 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
                 />
                 {player.stats !== undefined ?
                     (
-                        <div className="pb-4 space-y-4 w-3/4">
-                            <BedwarsStats stats={player.stats.Bedwars} />
-                            <SkyWarsStats
-                                stats={player.stats.SkyWars}
-                                achievements_skywars_opal_obsession={player.achievements?.["skywars_opal_obsession"] ?? 0}
-                            />
+                        <div className="pb-4 w-3/4">
+                            <Accordion type="multiple" className="space-y-4">
+                                <BedwarsStats stats={player.stats.Bedwars} />
+                                <SkyWarsStats
+                                    stats={player.stats.SkyWars}
+                                    achievements_skywars_opal_obsession={player.achievements?.["skywars_opal_obsession"] ?? 0}
+                                />
+                            </Accordion>
                         </div>
                     ) :
                     (