Support copy installation command

Author: Folyd

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

@@ -42,12 +42,54 @@
     border-radius: 8px;
     width: 100%;
     text-align: center;
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.15);
+
+        .copyButton {
+            opacity: 1;
+        }
+    }
+}
+
+.copyButton {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.2s;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+}
+
+.copied .copyButton {
+    background: rgba(76, 175, 80, 0.3);
 }
 
 .commandText {
+    display: block;
+    transition: opacity 0.3s ease;
     font-family: monospace;
     font-weight: bold;
     font-size: 14px;
+    opacity: 1;
+}
+
+.commandText.fade {
+    opacity: 0;
 }
 
 @media screen and (max-width: 600px) {

theme/components/version-card/index.tsx

@@ -1,18 +1,75 @@
 import { type FC } from 'react';
 import styles from './index.module.scss';
+import { useState, useCallback, useEffect, useRef } from 'react';
 
 const VersionCard: FC = () => {
+    const [copied, setCopied] = useState(false);
+    const [currentCommand, setCurrentCommand] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFading, setIsFading] = useState(false);
+    const intervalRef = useRef<NodeJS.Timeout>();
+
+    const commands = [
+        'curl https://aiscript.dev/install.sh | sh',
+        'cargo install aiscript'
+    ];
+
+    const handleCopy = useCallback(() => {
+        navigator.clipboard.writeText(commands[currentCommand]).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }, [currentCommand, commands]);
+
+    const switchCommand = useCallback(() => {
+        setIsFading(true);
+        setTimeout(() => {
+            setCurrentCommand((prev) => (prev + 1) % commands.length);
+            setIsFading(false);
+        }, 300);
+    }, [commands.length]);
+
+    useEffect(() => {
+        if (!isHovered) {
+            intervalRef.current = setInterval(switchCommand, 3000);
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [isHovered, switchCommand]);
+
+    const handleMouseEnter = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+
+    const handleMouseLeave = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+
     return (
         <div className={styles.versionCard}>
             <div className={styles.content}>
                 <div className={styles.version}>
                     <span className={styles.label}>Latest Version</span>
                     <span className={styles.value}>v0.1.0</span>
                 </div>
-                <div className={styles.command}>
-                    <code className={styles.commandText}>
-                        curl https://aiscript.dev/install.sh | sh
+                <div 
+                    className={`${styles.command} ${copied ? styles.copied : ''}`}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                >
+                    <code className={`${styles.commandText} ${isFading ? styles.fade : ''}`}>
+                        {commands[currentCommand]}
                     </code>
+                    <button 
+                        className={styles.copyButton}
+                        onClick={handleCopy}
+                        title="Copy to clipboard"
+                    >
+                        {copied ? 'Copied!' : 'Copy'}
+                    </button>
                 </div>
             </div>
         </div>