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

This commit is contained in:
Mitchell McCaffrey 2020-10-01 16:25:06 +10:00
parent 02ae9dc765
commit a412cbde9d
3 changed files with 23 additions and 66 deletions

View File

@ -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;

View File

@ -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"
onDoubleClick={() => onDone(dice)}
>
<Image
sx={{
width: "100%",
height: "100%",
objectFit: "contain",
position: "absolute",
top: 0,
left: 0,
}}
<Tile
src={dice.preview}
title={dice.name}
isSelected={isSelected}
onSelect={() => onDiceSelect(dice)}
onDoubleClick={() => onDone(dice)}
large={large}
/>
<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>
);
}

View File

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