2 files changed, 51 insertions, 0 deletions
diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
new file mode 100644
index 00000000..f16c19f0
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer";
+
+const BuildingSidebarComponent = ({ inSimulation }) => {
+  return (
+    <div>
+      <h2>Building</h2>
+      {inSimulation ? (
+        <div className="alert alert-info">
+          <span className="fa fa-info-circle mr-2" />
+          <strong>Click on individual rooms</strong> to see their stats!
+        </div>
+      ) : (
+        <NewRoomConstructionContainer />
+      )}
+    </div>
+  );
+};
+
+export default BuildingSidebarComponent;
diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
new file mode 100644
index 00000000..7b049642
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -0,0 +1,31 @@
+import React from "react";
+
+const NewRoomConstructionComponent = ({
+  onStart,
+  onFinish,
+  onCancel,
+  currentRoomInConstruction
+}) => {
+  if (currentRoomInConstruction === -1) {
+    return (
+      <div className="btn btn-outline-primary btn-block" onClick={onStart}>
+        <span className="fa fa-plus mr-2" />
+        Construct a new room
+      </div>
+    );
+  }
+  return (
+    <div>
+      <div className="btn btn-primary btn-block" onClick={onFinish}>
+        <span className="fa fa-check mr-2" />
+        Finalize new room
+      </div>
+      <div className="btn btn-default btn-block" onClick={onCancel}>
+        <span className="fa fa-times mr-2" />
+        Cancel construction
+      </div>
+    </div>
+  );
+};
+
+export default NewRoomConstructionComponent;