58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
import { useState } from "react";
|
|
|
|
const Cuadrado = ({ valor, alHcerClick }) => {
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
|
|
const handleMouseEnter = () => {
|
|
setShowMenu(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
|
|
setTimeout(() => {
|
|
if (!document.querySelector('.menu')?.contains(document.activeElement)) {
|
|
setShowMenu(false);
|
|
}
|
|
}, 100);
|
|
};
|
|
|
|
const handleSelect = (valor) => {
|
|
alHcerClick(valor);
|
|
setShowMenu(false);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="relative w-16 h-16"
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<button
|
|
className="w-full h-full text-black border border-gray-500 text-2xl font-exterabold flex items-center justify-center bg-blue-300 rounded-xl"
|
|
onClick={() => setShowMenu(true)}
|
|
disabled={valor !== ''}
|
|
>
|
|
{valor}
|
|
</button>
|
|
{showMenu && (
|
|
<div className="menu absolute top-0 right-0 bg-white border border-gray-500 shadow-md p-2">
|
|
<button
|
|
className="block w-full text-center text-black p-1 hover:bg-gray-200"
|
|
onClick={() => handleSelect('X')}
|
|
>
|
|
X
|
|
</button>
|
|
<button
|
|
className="block w-full text-center text-black p-1 hover:bg-gray-200"
|
|
onClick={() => handleSelect('O')}
|
|
>
|
|
O
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Cuadrado;
|