From 2306f619b26f2be4f208c01c20d55f6e4feab5c0 Mon Sep 17 00:00:00 2001 From: Taken Date: Mon, 1 Sep 2025 00:29:32 +0200 Subject: [PATCH] Replaced collapsible with accordion --- bun.lock | 7 ++ package.json | 1 + .../player/[ign]/_stats/bedwars/bedwars.tsx | 50 ++++---------- .../player/[ign]/_stats/skywars/skywars.tsx | 50 ++++---------- src/app/(stats)/player/[ign]/page.tsx | 15 +++-- src/components/ui/accordion.tsx | 66 +++++++++++++++++++ src/components/ui/collapsible.tsx | 33 ---------- 7 files changed, 105 insertions(+), 117 deletions(-) create mode 100644 src/components/ui/accordion.tsx delete mode 100644 src/components/ui/collapsible.tsx diff --git a/bun.lock b/bun.lock index 1a84ade..66fc181 100644 --- a/bun.lock +++ b/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=="], diff --git a/package.json b/package.json index 8aaceab..2888492 100644 --- a/package.json +++ b/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", diff --git a/src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx b/src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx index 59e907a..073e21a 100644 --- a/src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx +++ b/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(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 ( - - - -
+ + + +

BedWars

- - {opened === false ? : } - -
- + + - - - - + + + + ) } diff --git a/src/app/(stats)/player/[ign]/_stats/skywars/skywars.tsx b/src/app/(stats)/player/[ign]/_stats/skywars/skywars.tsx index 2a52ff5..b377103 100644 --- a/src/app/(stats)/player/[ign]/_stats/skywars/skywars.tsx +++ b/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(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 ( - - - -
+ + + +

SkyWars

- - {opened === false ? : } - -
- + + @@ -130,9 +102,9 @@ export default function SkyWarsStats( })} /> - - - - + + + + ) } diff --git a/src/app/(stats)/player/[ign]/page.tsx b/src/app/(stats)/player/[ign]/page.tsx index d60e956..fb01b55 100644 --- a/src/app/(stats)/player/[ign]/page.tsx +++ b/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 ? ( -
- - +
+ + + +
) : ( diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx new file mode 100644 index 0000000..c1db9f7 --- /dev/null +++ b/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) { + return +} + +function AccordionItem({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AccordionTrigger({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + + ) +} + +function AccordionContent({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + +
{children}
+ + ) +} + +export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx deleted file mode 100644 index 3c323ca..0000000 --- a/src/components/ui/collapsible.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client" - -import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" - -function Collapsible({ - ...props -}: React.ComponentProps) { - return -} - -function CollapsibleTrigger({ - ...props -}: React.ComponentProps) { - return ( - - ) -} - -function CollapsibleContent({ - ...props -}: React.ComponentProps) { - return ( - - ) -} - -export { Collapsible, CollapsibleContent, CollapsibleTrigger }