From 0729aeffed9976217e7a9b406e526465ae3207c0 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Tue, 22 Oct 2024 17:46:50 +0800
Subject: [PATCH] feat: add switch mouse scroll

---
 components/Switch.tsx | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/components/Switch.tsx b/components/Switch.tsx
index 607889eaa..41e865f33 100644
--- a/components/Switch.tsx
+++ b/components/Switch.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
-import React from "react";
+import React, { useRef, useEffect } from "react";
 
 export default function Switch({
   allTag,
@@ -13,8 +13,36 @@ export default function Switch({
   nowTag: string;
   setTag: (tag: string) => void;
 }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const isOverflowing = container.scrollWidth > container.clientWidth;
+
+    if (!isOverflowing) {
+      return;
+    }
+
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      container.scrollLeft += e.deltaY;
+    };
+
+    container.addEventListener("wheel", onWheel, { passive: false });
+
+    return () => {
+      container.removeEventListener("wheel", onWheel);
+    };
+  }, []);
+
   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="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
         {allTag.map((tag) => (
           <div
@@ -24,7 +52,7 @@ export default function Switch({
               "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
               nowTag === tag
                 ? "text-black dark:text-white"
-                : "text-stone-400 dark:text-stone-500",
+                : "text-stone-400 dark:text-stone-500"
             )}
           >
             {nowTag === tag && (