34 lines
773 B
JavaScript
34 lines
773 B
JavaScript
import React from "react";
|
|
import { Flex } from "theme-ui";
|
|
import SimpleBar from "simplebar-react";
|
|
|
|
import DiceTile from "./DiceTile";
|
|
|
|
function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
|
|
return (
|
|
<SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
|
|
<Flex
|
|
py={2}
|
|
bg="muted"
|
|
sx={{
|
|
flexWrap: "wrap",
|
|
width: "500px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
{dice.map((dice) => (
|
|
<DiceTile
|
|
key={dice.key}
|
|
dice={dice}
|
|
isSelected={selectedDice && dice.key === selectedDice.key}
|
|
onDiceSelect={onDiceSelect}
|
|
onDone={onDone}
|
|
/>
|
|
))}
|
|
</Flex>
|
|
</SimpleBar>
|
|
);
|
|
}
|
|
|
|
export default DiceTiles;
|