feat: better group switch

This commit is contained in:
hamster1963 2025-01-01 22:00:28 +08:00
parent 2b854a1934
commit 0b43a3943d

View File

@ -1,5 +1,6 @@
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { m } from "framer-motion" import { m } from "framer-motion"
import { createRef, useEffect, useRef } from "react"
export default function GroupSwitch({ export default function GroupSwitch({
tabs, tabs,
@ -13,16 +14,52 @@ export default function GroupSwitch({
const customBackgroundImage = const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable // @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const scrollRef = useRef<HTMLDivElement>(null)
const tagRefs = useRef(tabs.map(() => createRef<HTMLDivElement>()))
useEffect(() => {
const container = scrollRef.current
if (!container) return
const isOverflowing = container.scrollWidth > container.clientWidth
if (!isOverflowing) return
const onWheel = (e: WheelEvent) => {
e.preventDefault()
container.scrollLeft += e.deltaY
}
container.addEventListener("wheel", onWheel, { passive: false })
return () => {
container.removeEventListener("wheel", onWheel)
}
}, [])
useEffect(() => {
const currentTagRef = tagRefs.current[tabs.indexOf(currentTab)]
if (currentTagRef && currentTagRef.current) {
currentTagRef.current.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
})
}
}, [currentTab])
return ( return (
<div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"> <div ref={scrollRef} className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
<div <div
className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", { className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
"bg-stone-100/70 dark:bg-stone-800/70": customBackgroundImage, "bg-stone-100/70 dark:bg-stone-800/70": customBackgroundImage,
})} })}
> >
{tabs.map((tab: string) => ( {tabs.map((tab: string, index: number) => (
<div <div
key={tab} key={tab}
ref={tagRefs.current[index]}
onClick={() => setCurrentTab(tab)} onClick={() => setCurrentTab(tab)}
className={cn( className={cn(
"relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500", "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",