Added map controls component and moved to seperate files for icons

2020-04-18 23:31:40 +10:00
parent ecaf82fd53
commit c12abf5706
14 changed files with 233 additions and 48 deletions
--- a/src/components/MapControls.js
+++ b/src/components/MapControls.js
@@ -0,0 +1,56 @@
+import React from "react";
+import { Flex, Box, IconButton } from "theme-ui";
+
+import AddMapButton from "./AddMapButton";
+import ExpandMoreIcon from "../icons/ExpandMoreIcon";
+import PanToolIcon from "../icons/PanToolIcon";
+import BrushToolIcon from "../icons/BrushToolIcon";
+import EraseToolIcon from "../icons/EraseToolIcon";
+import UndoIcon from "../icons/UndoIcon";
+import RedoIcon from "../icons/RedoIcon";
+
+function MapControls({ onMapChange }) {
+  const divider = (
+    <Box
+      my={2}
+      bg="text"
+      sx={{ height: "2px", width: "24px", borderRadius: "2px", opacity: 0.5 }}
+    ></Box>
+  );
+  return (
+    <Flex
+      p={2}
+      sx={{
+        position: "absolute",
+        top: 0,
+        right: 0,
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <IconButton aria-label="Expand More" title="Expand More">
+        <ExpandMoreIcon />
+      </IconButton>
+      <AddMapButton onMapChange={onMapChange} />
+      {divider}
+      <IconButton aria-label="Pan Tool" title="Pan Tool">
+        <PanToolIcon />
+      </IconButton>
+      <IconButton aria-label="Brush Tool" title="Brush Tool">
+        <BrushToolIcon />
+      </IconButton>
+      <IconButton aria-label="Erase Tool" title="Erase Tool">
+        <EraseToolIcon />
+      </IconButton>
+      {divider}
+      <IconButton aria-label="Undo" title="Undo">
+        <UndoIcon />
+      </IconButton>
+      <IconButton aria-label="Redo" title="Redo">
+        <RedoIcon />
+      </IconButton>
+    </Flex>
+  );
+}
+
+export default MapControls;