import React , { useState } from 'react' ; const maxColumns = 6 ; const maxRows = 6 ; export default function GridSelect ( props ) { const [ { highlightWidth , highlightHeight } , setHighlight ] = useState ( { highlightWidth : 0 , highlightHeight : 0 } ) ; const hoverClass = ( col , row ) => { setHighlight ( { highlightWidth : row , highlightHeight : col } ) ; } ; const activeClass = ( col , row ) => { setHighlight ( { highlightWidth : 0 , highlightHeight : 0 } ) ; props . changeGrid ( row , col ) ; } ; let grid = [ ] ; for ( let i = 1 ; i <= maxColumns ; i ++ ) { let rows = [ ] ; for ( let j = 1 ; j <= maxRows ; j ++ ) { rows . push ( < div className = { `h-6 w-6 mr-0.5 mb-0.5 bg-indigo-700` } key = { i * j } onMouseEnter = { ( ) => hoverClass ( i , j ) } onClick = { ( ) => activeClass ( i , j ) } > < /div>); } grid . push ( rows ) ; } return ( < div className = "flex flex-shrink-0 space-x-6" > < div className = "" > < p className = "font-medium text-sm mb-2 text-gray-300" > Tile size < /p> < p className = "text-white font-bold" > { props . col } x { props . row } < /p> < p className = "text-white font-bold" > { props . col * 16 } px x { props . row * 16 } px < /p> < /div> < div className = "w-42 h-42 relative" onMouseLeave = { ( ) => hoverClass ( 0 , 0 ) } > < div className = "absolute bg-indigo-300 z-20 rounded-sm -ml-0.5 -mt-0.5" style = { { width : `${ 1.625 * highlightWidth + 0.125 }rem` , height : `${ 1.625 * highlightHeight + 0.125 }rem` } } > < /div> < div className = "absolute bg-white z-10 rounded-sm -ml-0.5 -mt-0.5" style = { { width : `${ 1.625 * props . col + 0.125 }rem` , height : `${ 1.625 * props . row + 0.125 }rem` } } > < /div> < div className = "flex flex-wrap relative z-30" > { grid } < /div> < /div> < /div>); }