Disable command copy and transition in mobile device

Author: Folyd

theme/components/version-card/index.module.scss

@@ -103,9 +103,23 @@
 
     .command {
         padding: 10px 16px;
+        cursor: default;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.1);
+
+            .copyButton {
+                opacity: 0;
+            }
+        }
     }
 
     .commandText {
         font-size: 12px;
+        transition: none;
+    }
+
+    .copyButton {
+        display: none;
     }
 }

theme/components/version-card/index.tsx

@@ -7,19 +7,32 @@ const VersionCard: FC = () => {
     const [currentCommand, setCurrentCommand] = useState(0);
     const [isHovered, setIsHovered] = useState(false);
     const [isFading, setIsFading] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
     const intervalRef = useRef<NodeJS.Timeout>();
 
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth <= 600);
+        };
+        
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
     const commands = [
         'curl https://aiscript.dev/install.sh | sh',
         'cargo install aiscript'
     ];
 
     const handleCopy = useCallback(() => {
+        if (isMobile) return;
         navigator.clipboard.writeText(commands[currentCommand]).then(() => {
             setCopied(true);
             setTimeout(() => setCopied(false), 2000);
         });
-    }, [currentCommand, commands]);
+    }, [currentCommand, commands, isMobile]);
 
     const switchCommand = useCallback(() => {
         setIsFading(true);
@@ -30,15 +43,15 @@ const VersionCard: FC = () => {
     }, [commands.length]);
 
     useEffect(() => {
-        if (!isHovered) {
+        if (!isHovered && !isMobile) {
             intervalRef.current = setInterval(switchCommand, 3000);
         }
         return () => {
             if (intervalRef.current) {
                 clearInterval(intervalRef.current);
             }
         };
-    }, [isHovered, switchCommand]);
+    }, [isHovered, switchCommand, isMobile]);
 
     const handleMouseEnter = useCallback(() => {
         setIsHovered(true);