app_totito_next/app/tablero.js

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>
    )
}

export default Tablero