56 lines
1.0 KiB
JavaScript
56 lines
1.0 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { Flex, Image as UIImage } from "theme-ui";
|
||
|
|
|
||
|
|
import AddIcon from "../../icons/AddIcon";
|
||
|
|
|
||
|
|
function MapSelect({ maps, onMapAdd }) {
|
||
|
|
const tileProps = {
|
||
|
|
m: 2,
|
||
|
|
sx: {
|
||
|
|
width: "150px",
|
||
|
|
height: "150px",
|
||
|
|
borderRadius: "4px",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
bg: "muted",
|
||
|
|
};
|
||
|
|
|
||
|
|
function tile(map) {
|
||
|
|
return (
|
||
|
|
<Flex // TODO: use DB key
|
||
|
|
key={map.source}
|
||
|
|
{...tileProps}
|
||
|
|
>
|
||
|
|
<UIImage
|
||
|
|
sx={{ width: "100%", objectFit: "contain" }}
|
||
|
|
src={map.source}
|
||
|
|
/>
|
||
|
|
</Flex>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Flex
|
||
|
|
my={2}
|
||
|
|
bg="muted"
|
||
|
|
sx={{
|
||
|
|
flexWrap: "wrap",
|
||
|
|
width: "500px",
|
||
|
|
maxHeight: "300px",
|
||
|
|
borderRadius: "4px",
|
||
|
|
// TODO: move to simple scroll
|
||
|
|
overflowY: "scroll",
|
||
|
|
flexGrow: 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{maps.map(tile)}
|
||
|
|
<Flex onClick={onMapAdd} {...tileProps}>
|
||
|
|
<AddIcon />
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MapSelect;
|