Replaced collapsible with accordion

bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "stats-hypixel",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-collapsible": "^1.1.12",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
@@ -197,12 +198,18 @@
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
+    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA=="],
+
     "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
 
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
+
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
+
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],

package.json

@@ -10,6 +10,7 @@
     "fmt": "dprint fmt src/**/*.ts src/**/*.tsx"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",

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>
+        <AccordionItem value="bedwars">
+            <Card className="py-0">
                 <CardContent>
-                <Collapsible ref={ref}>
+                    <AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
-                    <div className="flex justify-between">
                         <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">
+                    </AccordionTrigger>
-                            {opened === false ? <ChevronDown /> : <ChevronUp />}
+                    <AccordionContent>
-                        </CollapsibleTrigger>
-                    </div>
-                    <CollapsibleContent>
                         <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>
+                    </AccordionContent>
-                </Collapsible>
                 </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>
+        <AccordionItem value="skywars">
+            <Card className="py-0">
                 <CardContent>
-                <Collapsible ref={ref}>
+                    <AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
-                    <div className="flex justify-between">
                         <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">
+                    </AccordionTrigger>
-                            {opened === false ? <ChevronDown /> : <ChevronUp />}
+                    <AccordionContent>
-                        </CollapsibleTrigger>
-                    </div>
-                    <CollapsibleContent>
                         <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>
+                    </AccordionContent>
-                </Collapsible>
                 </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">
+                        <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>
                     ) :
                     (

src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+    return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+    className,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn("border-b last:border-b-0", className)}
+            {...props}
+        />
+    )
+}
+
+function AccordionTrigger({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(
+                    "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                <ChevronDownIcon className="transition-transform duration-200 translate-y-0.5 pointer-events-none text-muted-foreground size-4 shrink-0" />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    )
+}
+
+function AccordionContent({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+    return (
+        <AccordionPrimitive.Content
+            data-slot="accordion-content"
+            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+            {...props}
+        >
+            <div className={cn("pt-0 pb-4", className)}>{children}</div>
+        </AccordionPrimitive.Content>
+    )
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

src/components/ui/collapsible.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-function Collapsible({
-    ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-    return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-    ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-    return (
-        <CollapsiblePrimitive.CollapsibleTrigger
-            data-slot="collapsible-trigger"
-            {...props}
-        />
-    )
-}
-
-function CollapsibleContent({
-    ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-    return (
-        <CollapsiblePrimitive.CollapsibleContent
-            data-slot="collapsible-content"
-            {...props}
-        />
-    )
-}
-
-export { Collapsible, CollapsibleContent, CollapsibleTrigger }