1 files changed, 28 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
new file mode 100644
index 00000000..4c60bfb2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { control, toolBar } from './Toolbar.module.scss'
+import { Button } from '@patternfly/react-core'
+import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCamera } from '@fortawesome/free-solid-svg-icons'
+
+const Toolbar = ({ onZoom, onExport }) => (
+    <div className={toolBar}>
+        <Button variant="tertiary" title="Zoom in" onClick={() => onZoom(true)} className={control}>
+            <SearchPlusIcon />
+        </Button>
+        <Button variant="tertiary" title="Zoom out" onClick={() => onZoom(false)} className={control}>
+            <SearchMinusIcon />
+        </Button>
+        <Button variant="tertiary" title="Export Canvas to PNG Image" onClick={() => onExport()} className={control}>
+            <FontAwesomeIcon icon={faCamera} />
+        </Button>
+    </div>
+)
+
+Toolbar.propTypes = {
+    onZoom: PropTypes.func,
+    onExport: PropTypes.func,
+}
+
+export default Toolbar