vitessce/src/components/layer-controller/ColorPalette.js

Vitessce app and React component library

import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import LensIcon from '@material-ui/icons/Lens';
import { makeStyles } from '@material-ui/core/styles';


import { VIEWER_PALETTE } from '../utils';

const useStyles = makeStyles(theme => ({
  container: {
    width: '70px',
    height: '40px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexWrap: 'wrap',
  },
  button: {
    padding: '3px',
    width: '16px',
  },
  icon: {
    width: '17px',
    height: '17px',
    stroke: theme.palette.action.selected,
    'stroke-width': '1px',
  },
}));

const ColorPalette = ({ handleChange }) => {
  const classes = useStyles();
  return (
    <div className={classes.container} aria-label="color-swatch">
      {VIEWER_PALETTE.map(color => (
        <IconButton
          className={classes.button}
          key={color}
          onClick={() => handleChange(color)}
        >
          <LensIcon
            fontSize="small"
            style={{ color: `rgb(${color})` }}
            className={classes.icon}
          />
        </IconButton>
      ))}
    </div>
  );
};

export default ColorPalette;