diff --git a/src/components/Tile.js b/src/components/Tile.js
new file mode 100644
index 0000000..238ccd8
--- /dev/null
+++ b/src/components/Tile.js
@@ -0,0 +1,122 @@
+import React from "react";
+import { Flex, Image as UIImage, IconButton, Box, Text, Badge } from "theme-ui";
+
+import EditTileIcon from "../icons/EditTileIcon";
+
+function Tile({
+ src,
+ title,
+ isSelected,
+ onSelect,
+ onEdit,
+ onDoubleClick,
+ large,
+ canEdit,
+ badges,
+ editTitle,
+}) {
+ return (
+ {
+ e.stopPropagation();
+ onSelect();
+ }}
+ onDoubleClick={(e) => {
+ if (canEdit) {
+ onDoubleClick(e);
+ }
+ }}
+ >
+
+
+
+ {title}
+
+
+
+
+ {badges.map((badge, i) => (
+
+ {badge}
+
+ ))}
+
+ {canEdit && (
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ onEdit();
+ }}
+ bg="overlay"
+ sx={{ borderRadius: "50%" }}
+ m={2}
+ >
+
+
+
+ )}
+
+ );
+}
+
+export default Tile;
diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js
index 9c29d6d..299e48e 100644
--- a/src/components/map/MapTile.js
+++ b/src/components/map/MapTile.js
@@ -1,7 +1,6 @@
import React from "react";
-import { Flex, Image as UIImage, IconButton, Box, Text } from "theme-ui";
-import EditMapIcon from "../../icons/EditMapIcon";
+import Tile from "../Tile";
import useDataSource from "../../helpers/useDataSource";
import { mapSources as defaultMapSources, unknownSource } from "../../maps";
@@ -14,6 +13,7 @@ function MapTile({
onDone,
large,
canEdit,
+ badges,
}) {
const isDefault = map.type === "default";
const mapSource = useDataSource(
@@ -27,100 +27,17 @@ function MapTile({
);
return (
- {
- e.stopPropagation();
- onMapSelect(map);
- }}
- onDoubleClick={(e) => {
- if (canEdit) {
- onDone(e);
- }
- }}
- >
-
-
-
- {map.name}
-
-
-
- {canEdit && (
-
- {
- e.preventDefault();
- e.stopPropagation();
- onMapEdit(map.id);
- }}
- bg="overlay"
- sx={{ borderRadius: "50%" }}
- m={2}
- >
-
-
-
- )}
-
+ onMapSelect(map)}
+ onEdit={() => onMapEdit(map.id)}
+ onDoubleClick={onDone}
+ large={large}
+ canEdit={canEdit}
+ badges={badges}
+ />
);
}
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index 2abfb75..4198bc1 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -73,6 +73,7 @@ function MapTiles({
canEdit={
isSelected && selectMode === "single" && selectedMaps.length === 1
}
+ badges={[`${map.gridX}x${map.gridY}`]}
/>
);
}
diff --git a/src/icons/EditMapIcon.js b/src/icons/EditTileIcon.js
similarity index 89%
rename from src/icons/EditMapIcon.js
rename to src/icons/EditTileIcon.js
index 6e43c62..8f17bcb 100644
--- a/src/icons/EditMapIcon.js
+++ b/src/icons/EditTileIcon.js
@@ -1,6 +1,6 @@
import React from "react";
-function EditMapIcon() {
+function EditTileIcon() {
return (