Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

local push

Browse Source
This commit is contained in:
scarlett kadan
2024-05-10 01:50:18 -04:00
parent fa8f1441c8
commit ac94ad837f
6 changed files with 252 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/MapComponent.js
View File

@ -3,6 +3,17 @@ 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">
@ -10,6 +21,91 @@ export default class MapComponent extends Component {
<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>
);