40 lines
970 B
JavaScript
40 lines
970 B
JavaScript
import { useState } from 'react';
|
|
|
|
const ContactButton = ({ buttonText, email }) => {
|
|
const [hovered, setHovered] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleHover = () => {
|
|
setHovered(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setHovered(false);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
navigator.clipboard.writeText(email);
|
|
setCopied(true);
|
|
setTimeout(() => {
|
|
setCopied(false);
|
|
}, 2000);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`px-20 mt-8 mx-5 py-2 text-white border rounded focus:outline-none ${
|
|
hovered
|
|
? 'border-white transition duration-300 ease-in-out'
|
|
: 'border-blue-500 transition duration-300 ease-in-out'
|
|
}`}
|
|
onMouseEnter={handleHover}
|
|
onMouseLeave={handleMouseLeave}
|
|
onClick={handleClick}
|
|
>
|
|
{copied ? 'Email copied to your clipboard.' : hovered ? email : buttonText}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default ContactButton;
|