Move dice tile to use tile component and added default props to it

src/components/Tile.js

@@ -119,4 +119,17 @@ function Tile({
   );
 }
 
+Tile.defaultProps = {
+  src: "",
+  title: "",
+  isSelected: false,
+  onSelect: () => {},
+  onEdit: () => {},
+  onDoubleClick: () => {},
+  large: false,
+  canEdit: false,
+  badges: [],
+  editTitle: "Edit",
+};
+
 export default Tile;

src/components/dice/DiceTile.js

@@ -1,74 +1,17 @@
 import React from "react";
-import { Flex, Image, Text, Box } from "theme-ui";
+
+import Tile from "../Tile";
 
 function DiceTile({ dice, isSelected, onDiceSelect, onDone, large }) {
   return (
-    <Flex
-      onClick={() => onDiceSelect(dice)}
-      sx={{
-        position: "relative",
-        width: large ? "48%" : "32%",
-        height: "0",
-        paddingTop: large ? "48%" : "32%",
-        borderRadius: "4px",
-        justifyContent: "center",
-        alignItems: "center",
-        cursor: "pointer",
-      }}
-      my={1}
-      mx={`${large ? 1 : 2 / 3}%`}
-      bg="muted"
+    <Tile
+      src={dice.preview}
+      title={dice.name}
+      isSelected={isSelected}
+      onSelect={() => onDiceSelect(dice)}
       onDoubleClick={() => onDone(dice)}
-    >
-      <Image
-        sx={{
-          width: "100%",
-          height: "100%",
-          objectFit: "contain",
-          position: "absolute",
-          top: 0,
-          left: 0,
-        }}
-        src={dice.preview}
-      />
-      <Flex
-        sx={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          background:
-            "linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
-          alignItems: "flex-end",
-          justifyContent: "center",
-        }}
-        p={2}
-      >
-        <Text
-          as="p"
-          variant="heading"
-          color="hsl(210, 50%, 96%)"
-          sx={{ textAlign: "center" }}
-        >
-          {dice.name}
-        </Text>
-      </Flex>
-      <Box
-        sx={{
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          borderColor: "primary",
-          borderStyle: isSelected ? "solid" : "none",
-          borderWidth: "4px",
-          pointerEvents: "none",
-          borderRadius: "4px",
-        }}
-      />
-    </Flex>
+      large={large}
+    />
   );
 }
 

src/components/map/MapTile.js

@@ -37,6 +37,7 @@ function MapTile({
       large={large}
       canEdit={canEdit}
       badges={badges}
+      editTitle="Edit Map"
     />
   );
 }