Refactored component folder structure to be a little clearer

src/components/map/MapToken.js

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Box, Image } from "theme-ui";
+
+import TokenLabel from "../token/TokenLabel";
+import TokenStatus from "../token/TokenStatus";
+
+import usePreventTouch from "../../helpers/usePreventTouch";
+
+function MapToken({ token, tokenSizePercent, className }) {
+  const imageRef = useRef();
+  // Stop touch to prevent 3d touch gesutre on iOS
+  usePreventTouch(imageRef);
+
+  return (
+    <Box
+      style={{
+        transform: `translate(${token.x * 100}%, ${token.y * 100}%)`,
+        width: "100%",
+        height: "100%",
+      }}
+      sx={{
+        position: "absolute",
+        pointerEvents: "none",
+      }}
+    >
+      <Box
+        style={{
+          width: `${tokenSizePercent * (token.size || 1)}%`,
+        }}
+        sx={{
+          position: "absolute",
+          pointerEvents: "all",
+        }}
+      >
+        <Box
+          sx={{
+            position: "absolute",
+            display: "flex", // Set display to flex to fix height being calculated wrong
+            width: "100%",
+            flexDirection: "column",
+          }}
+        >
+          <Image
+            className={className}
+            sx={{
+              userSelect: "none",
+              touchAction: "none",
+              width: "100%",
+            }}
+            src={token.image}
+            // pass data into the dom element used to pass state to the ProxyToken
+            data-id={token.id}
+            data-size={token.size}
+            data-label={token.label}
+            data-status={token.status}
+            ref={imageRef}
+          />
+          {token.status && <TokenStatus statuses={token.status.split(" ")} />}
+          {token.label && <TokenLabel label={token.label} />}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default MapToken;