.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal img {
max-height: 90vh;
max-width: 90vw;
object-fit: contain;
}

const Modal = ({ image, onClose }) => (

);

const App = () => {
const [selectedPosition, setSelectedPosition] = useState(‘all’);
const [selectedStack, setSelectedStack] = useState(‘all’);
const [selectedImage, setSelectedImage] = useState(null);

const positions = [‘UTG’, ‘UTG+1’, ‘LJ’, ‘HJ’, ‘CO’, ‘BTN’, ‘SB’];
const stacks = [’10bb’, ’15bb’, ’30bb’, ’40bb’, ’80bb’];

const ranges = positions.flatMap(position =>
stacks.map(stack => ({
id: `${position}-${stack}`,
position,
stack,
src: `RFI ${position} ${stack}.jpg`
}))
);

const filteredRanges = ranges.filter(range =>
(selectedPosition === ‘all’ || range.position === selectedPosition) &&
(selectedStack === ‘all’ || range.stack === selectedStack)
);

return (

);
};

const { useState } = React;
ReactDOM.render(, document.getElementById(‘root’));