);

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’));