rectangles

not-wordle.tsx

const Rectangles = ({
  cols,
  defaultBackground,
  defaultBackgroundEmoji,
  paints,
  rows,
  paint
}) => {
  return (
    <L.Vertical>
      {times(rows).map((r, rowIndex) => (
        <L.Horizontal key={rowIndex}>
          {times(cols).map((c, columnIndex) => {
            const foundPaint = findPaint({ paints, rowIndex, columnIndex });
            return (
              <Rectangle
                onRightClick={(e) => {
                  e.preventDefault();
                  paint({ rowIndex, columnIndex, paint: '' });
                }}
                key={columnIndex}
                onClick={() => {
                  paint({ rowIndex, columnIndex });
                }}
              >
                {renderRectangleContent({
                  foundPaint,
                  defaultBackground,
                  defaultBackgroundEmoji
                })}
              </Rectangle>
            );
          })}
        </L.Horizontal>
      ))}
    </L.Vertical>
  );
};