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