Realistic Button

1'use client';
2
3import { useState, useEffect } from 'react';
4import styles from './realistic-button.module.css';
5import { useSound } from '@/hooks/use-sound';
6
7type TextState = 'off' | 'drawing' | 'on';
8
9export default function RealisticButton() {
10    const [isActive, setIsActive] = useState(false);
11    const [isPressed, setIsPressed] = useState(false);
12    const [textState, setTextState] = useState<TextState>('off');
13
14    const playClick = useSound("/audio/ui-sounds/mech-key-press.mp3");
15
16    useEffect(() => {
17        if (isActive) {
18            setTextState('drawing');
19            const timer = setTimeout(() => setTextState('on'), 900);
20            return () => clearTimeout(timer);
21        } else {
22            setTextState('off');
23        }
24    }, [isActive]);
25
26    const onClick = () => {
27        playClick();
28        setIsPressed(true);
29        setIsActive(false);
30        setTimeout(() => setIsPressed(false), 200);
31    }
32
33    return (
34        <div className={`${styles.wrap} sm:scale-[0.6] scale-[0.5]`}>
35            <button
36                className={`${styles.button} ${isPressed ? styles.buttonPressed : ''} relative overflow-hidden w-[250px] h-[96px] bg-black z-20 border-transparent rounded-[24px]`}
37                onMouseEnter={() => setIsActive(true)}
38                onClick={onClick}
39                onMouseLeave={() => { setIsActive(false); setIsPressed(false); }}
40                onMouseDown={() => setIsPressed(true)}
41                onMouseUp={() => setIsPressed(false)}
42                onTouchStart={() => setIsPressed(true)}
43                onTouchEnd={() => setIsPressed(false)}
44                style={{
45                    boxShadow: isActive || isPressed
46                        ? 'inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -6px 1px -4px #ff7300, inset 0 -15px 6px -8px #cc5500,'
47                        : 'inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 1px -4px #ff7300, inset 0 -15px 6px -8px #ff6600',
48                    transform: isPressed ? 'scale(0.94)' : 'scale(1)',
49                    transition: isPressed
50                        ? 'transform 0.07s ease, box-shadow 0.07s ease'
51                        : 'transform 0.2s ease, box-shadow 0.3s ease',
52                }}
53            >
54                <div className={`${styles.corner} absolute opacity-10 transition-all duration-400`}></div>
55
56                <div
57// … truncated