feat: better group switch

src/components/GroupSwitch.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils"
 import { m } from "framer-motion"
+import { createRef, useEffect, useRef } from "react"
 
 export default function GroupSwitch({
   tabs,
@@ -13,16 +14,52 @@ export default function GroupSwitch({
   const customBackgroundImage =
     // @ts-expect-error CustomBackgroundImage is a global variable
     (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 (
-    <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
         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,
         })}
       >
-        {tabs.map((tab: string) => (
+        {tabs.map((tab: string, index: number) => (
           <div
             key={tab}
+            ref={tagRefs.current[index]}
             onClick={() => setCurrentTab(tab)}
             className={cn(
               "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",