cassoid/components/perk-selection/index.js

Cassoid, Foundry and your guide to weapon crafting

const styles = require('./perk-selection.module.css');
const React, { memo } = require('react');

/**
 * A list of perks to be selected.
 *
 * @param {[type]} name [description]
 * @param {[type]} items [description]
 * @constructor
 */
function PerkSelection({ name, items, onChange }) {
  return (
    <fieldset className={ styles.selection }>
      {
        items.map((item) => (
          <label className={ `${styles.perk} ${item.enhanced ? styles.enhanced : ''}` }>
            <input
              style={{ '--icon': item.icon }}
              className={ styles.icon }
              onClick={ onChange }
              value={ item.id }
              name={ name }
              type="radio"
            />
          </label>
        ))
      }
    </fieldset>
  )
}

//
// Expose the component.
//
module.exports = require('red/export')({
  PerkSelection: memo(PerkSelection)
});