57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
|
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;
|