59 lines
1.4 KiB
React
59 lines
1.4 KiB
React
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
function LayoutSelector({ onSelection }) {
|
|
const [hoveredIndex, setHoveredIndex] = useState();
|
|
const hoverX = hoveredIndex % 3;
|
|
const hoverY = Math.floor(hoveredIndex / 3);
|
|
const isHovered = index => {
|
|
const x = index % 3;
|
|
const y = Math.floor(index / 3);
|
|
|
|
return x <= hoverX && y <= hoverY;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '20px 20px 20px',
|
|
gridTemplateRows: '20px 20px 20px',
|
|
backgroundColor: '#090c29', // primary-dark
|
|
}}
|
|
className="p-2"
|
|
>
|
|
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map(index => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
border: '1px solid white',
|
|
backgroundColor: isHovered(index) ? '#5acce6' : '#0b1a42',
|
|
}}
|
|
className="cursor-pointer"
|
|
onClick={() => {
|
|
const x = index % 3;
|
|
const y = Math.floor(index / 3);
|
|
|
|
onSelection({
|
|
numRows: y + 1,
|
|
numCols: x + 1,
|
|
});
|
|
}}
|
|
onMouseEnter={() => setHoveredIndex(index)}
|
|
onMouseLeave={() => setHoveredIndex(-1)}
|
|
></div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
LayoutSelector.defaultProps = {
|
|
onSelection: () => {},
|
|
};
|
|
|
|
LayoutSelector.propTypes = {
|
|
onSelection: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default LayoutSelector;
|