68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import { Flex } from "theme-ui";
|
|
import SimpleBar from "simplebar-react";
|
|
|
|
import AddIcon from "../../icons/AddIcon";
|
|
|
|
import TokenTile from "./TokenTile";
|
|
|
|
function TokenTiles({
|
|
tokens,
|
|
onTokenAdd,
|
|
onTokenSelect,
|
|
selectedToken,
|
|
onTokenRemove,
|
|
}) {
|
|
return (
|
|
<SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
|
|
<Flex
|
|
py={2}
|
|
bg="muted"
|
|
sx={{
|
|
flexWrap: "wrap",
|
|
width: "500px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
<Flex
|
|
onClick={onTokenAdd}
|
|
sx={{
|
|
":hover": {
|
|
color: "primary",
|
|
},
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
":active": {
|
|
color: "secondary",
|
|
},
|
|
width: "150px",
|
|
height: "150px",
|
|
borderRadius: "4px",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
cursor: "pointer",
|
|
}}
|
|
m={2}
|
|
bg="muted"
|
|
aria-label="Add Token"
|
|
title="Add Token"
|
|
>
|
|
<AddIcon large />
|
|
</Flex>
|
|
{tokens.map((token) => (
|
|
<TokenTile
|
|
key={token.id}
|
|
token={token}
|
|
isSelected={selectedToken && token.id === selectedToken.id}
|
|
onTokenSelect={onTokenSelect}
|
|
onTokenRemove={onTokenRemove}
|
|
/>
|
|
))}
|
|
</Flex>
|
|
</SimpleBar>
|
|
);
|
|
}
|
|
|
|
export default TokenTiles;
|