grungnet/src/components/token/TokenTileGroup.js

import React from "react";
import { Grid } from "theme-ui";

import Tile from "../tile/Tile";
import TokenTileImage from "./TokenTileImage";

import useResponsiveLayout from "../../hooks/useResponsiveLayout";

function TokenTileGroup({
  group,
  tokens,
  isSelected,
  onSelect,
  onDoubleClick,
}) {
  const layout = useResponsiveLayout();

  return (
    <Tile
      title={group.name}
      isSelected={isSelected}
      onSelect={() => onSelect(group.id)}
      onDoubleClick={onDoubleClick}
      columns="1fr 1fr"
    >
      <Grid
        columns={`repeat(${layout.groupGridColumns}, 1fr)`}
        p={2}
        sx={{ gridGap: 2 }}
      >
        {tokens.slice(0, 9).map((token) => (
          <TokenTileImage
            sx={{ borderRadius: "8px" }}
            token={token}
            key={`${token.id}-group-tile`}
          />
        ))}
      </Grid>
    </Tile>
  );
}

export default TokenTileGroup;