css y arreglo del codigo

app/cuadros.js

@@ -1,12 +1,57 @@
-const Cuadrado =({valor, alHcerClick})=> {
-    return(
-        <button 
-            className="h-14 w-14 rounded-xl bg-emerald-500 p-6 text-2xl py-3 px-5 font-bold"
-            onClick={alHcerClick()}
-        >
-            { valor }
-        </button>
-    )
-}
+import { useState } from "react";
 
-export default Cuadrado
+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;

app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

app/layout.js

@@ -1,3 +1,4 @@
+import './globals.css'
 export const metadata={
     title: 'Totito',
     description:'generado con next.js'

app/tablero.js

@@ -1,35 +1,39 @@
-import{ usiState } from "react"
-import Cuadrado from "./cuadros"
 
-const Tablero =()=>{
-    const [cuadros, setCuadros]= usiState(Array(9).fill(''))
-    const [turno, setTuerno]=usiState('X')
-    
-    const pintaFigura=(indexItem)=>{
-        
-        const misCuadros= cuadros.slice()
-        setCuadros(misCuadros)
-        if(turno==='X'){ // Verifica los turnos
-            setTuerno('O')
-        }
-        else{
-            setTuerno('X')
-        }
-    }
-    return(
-        <h1 class="px-5 text-5xl font-extrabold text-red-950 text-center">totito</h1>,// Titulo
-        <div class="p-5 grid grid-cols-3 gap-4 items-center">  
-        { //cuerpo e interactividad
-            cuadros.map((items, indexItem)=>{
-                return <Cuadrado 
-                            key={indexItem} 
-                            valor={items}
-                            alHcerClick={()=> pintaFigura(indexItem)}
-                        />
-            })
-        }
-        </div>
-    )
-}
+'use client'; 
 
-export default Tablero
+import { useState } from "react";
+import Cuadrado from "./cuadros";
+
+const Tablero = () => {
+    const [cuadros, setCuadros] = useState(Array(9).fill(''));
+    const [turno, setTurno] = useState('X');
+
+    const pintaFigura = (indexItem, valor) => {
+        if (cuadros[indexItem] === '') { // Solo actualiza si el cuadro está vacío
+            const misCuadros = cuadros.slice();
+            misCuadros[indexItem] = valor; // Coloca el valor ('X' o 'O') en el cuadro
+            setCuadros(misCuadros);
+
+            // Alterna el turno
+            setTurno(turno === 'X' ? 'O' : 'X');
+        }
+    };
+
+    return (
+        <>
+            <h1 className="px-5 text-5xl font-extrabold text-white text-center mt-20">Totito</h1> {/* Titulo */}
+            <div className="mt-10 p-5 grid grid-cols-3 gap-4 items-center">
+                {
+                cuadros.map((items, indexItem) => (
+                    <Cuadrado 
+                        key={indexItem} 
+                        valor={items}
+                        alHcerClick={(valor) => pintaFigura(indexItem, valor)}
+                    />
+                ))}
+            </div>
+        </>
+    );
+};
+
+export default Tablero;