Super Mario world in declarative react components

mario.react.jsx

const World1_1 = (
  <World name="1-1">
    <Bush x={14} y={1} width={4} />
    <Question x={24} y={4} coin />
    <Bricks x={27} y={4} width={5} height={1}>
      <Question x={28} y={4} special />
      <Question x={28} y={4} coin />
    </Bricks>
    <Question x={24} y={4} coin />
    <Bush x={30} y={1} width={2} />
    <Pipe x={35} y={1} height={2} />
    <Pipe x={45} y={1} height={3} />
    <Bush x={49} y={1} width={3} />
    <Pipe x={53} y={1} height={4} />
    <Pipe x={64} y={1} height={4} />
    <Bush x={68} y={1} width={4} />
    <Gap x={75} y={0} width={2} />
    <Bush x={78} y={1} width={2} />
    <Bricks x={83} y={4} width={3}>
      <Question x={84} y={4} coin />
    </Bricks>
    <Bricks x={86} y={8} width={7} />
    <Bricks x={97} y={8} width={3} />
    <Question x={100} y={8} coin />
    <Gap x={92} y={0} width={2} />
    <Bush x={96} width={3} />
    <Brick x={101} y={4} />
    <Brick x={107} y={4} />
    <Brick x={108} y={4} starman />
    <Question x={114} y={4} coin />
    <Question x={118} y={4} coin />
    <Question x={118} y={8} special />
    <Question x={122} y={4} coin />
    <Brick x={128} y={4} />
    <Bricks x={131} y={8} width={3} />
    <Bricks x={137} y={8} width={4}>
      <Question x={138} y={8} coin />
      <Question x={139} y={8} coin />
    </Bricks>
    <Bricks x={138} y={4} width={2} />
    <Bush x={117} width={3} />
    <Bush x={130} width={2} />
    <Stairs x={143} y={1} width={4} height={4} up />
    <Bush x={147} y={1} width={2} />
    <Stairs x={149} y={1} width={4} height={4} down />
    <Stairs x={157} y={1} width={4} height={4} up />
    <Gap x={162} y={0} width={2} />
    <Stairs x={164} y={1} width={4} height={4} down />
    <Pipe x={175} y={1} height={2} />
    <Bush x={179} y={1} width={2} />
    <Bricks x={180} y={4}>
      <Question x={182} y={4} coin />
    </Bricks>
    <Pipe x={190} y={1} height={2} />
    <Stairs x={192} y={1} width={8} height={8} up />
    <Bricks x={192+8} y={0} height={8} />
    <Pole x={208} y={1} height={10}>
      <Flag x={208} y={10} />
    </Pole>
  </World>
);

// Abstraction

Bush.defaultProps = {
  height: 1,
};

Gap.defaultProps = {
  height: 1,
};

const removeColliding = children => brick => children.find(child => child.props.x !== brick.props.x && child.props.y !== brick.props.y);

const Bricks = ({ x, y, width, height, children }) => (
  <Fragment>
    {Array.from({ length: width * height })
      .map((_, i) => (
        <Brick
          x={x + (i % width)}
          y={y + Math.floor(i / height)}
        />
      ))
      .filter(removeColliding(children))
    }
    {children}
  </Fragment>
);

Bricks.defaultProps = {
  height: 1,
};

const Stairs = ({ x, y, width, height, up, down, children }) => {
  return (
    <Fragment>
      {Array.from({ length: width * height })
        .map((_, i) => ({ X: (i % width), Y: Math.floor(i / height) }))
        .map(({ X, Y }) => (down && X >= height - Y) || (up && X >= Y) ? null : (
          <Brick
            x={x + X}
            y={y + Y}
          />
        ))
        .filter(removeColliding(children))
      }
      {children}
    </Fragment>
  );
}