jukebox-web/src/components/MapComponent.js

import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png";
import "../assets/stylesheets/map.scss";

export default class MapComponent extends Component {
  renderCircle(id, color) {
    return (
      <div className="map-box-circle" id={id}>
        <div
          className="map-box-circle-inner"
          style={{ border: `${color} 4px solid` }}
        ></div>
      </div>
    );
  }

  render() {
    return (
      <div className="map">
        <div className="map-image">
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="map-fieldContainer">
          <h1 className="map-title">Map</h1>
          <div className="map-boxContainer">
            <div className="map-box">
              <div className="map-box-row" id="row-1">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
              </div>
              <div className="map-box-row" id="row-2">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
                {this.renderCircle("circle-6", "#004990")}
              </div>
              <div className="map-box-row" id="row-3">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
                {this.renderCircle("circle-6", "#004990")}
                {this.renderCircle("circle-7", "#004990")}
              </div>
              <div className="map-box-row" id="row-4">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
                {this.renderCircle("circle-6", "#004990")}
              </div>
              <div className="map-box-row" id="row-5">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
                {this.renderCircle("circle-6", "#004990")}
              </div>
              <div className="map-box-row" id="row-6">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
                {this.renderCircle("circle-6", "#004990")}
              </div>
              <div className="map-box-row" id="row-7">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
                {this.renderCircle("circle-6", "#004990")}
                {this.renderCircle("circle-7", "#004990")}
              </div>
              <div className="map-box-row" id="row-8">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
                {this.renderCircle("circle-6", "#004990")}
              </div>
              <div className="map-box-row" id="row-9">
                {this.renderCircle("circle-1", "#004990")}
                {this.renderCircle("circle-2", "#004990")}
                {this.renderCircle("circle-3", "#004990")}
                {this.renderCircle("circle-4", "#004990")}
                {this.renderCircle("circle-5", "#004990")}
              </div>
            </div>
            <div className="map-details"></div>
          </div>
        </div>
      </div>
    );
  }
}