@shopgate/engage/favorites/components/Item/ItemCharacteristics.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
const styles = {
  property: css({
    fontSize: 14,
    color: 'var(--color-text-medium-emphasis)',
    fontWeight: 400
  })
};

/**
 * @param {Object} props The component props
 * @returns {JSX}
 */
const ItemCharacteristics = ({
  characteristics
}) => {
  if (!characteristics || characteristics.length === 0) {
    return null;
  }
  return /*#__PURE__*/_jsx("ul", {
    children: characteristics.map(({
      label,
      value
    }) => /*#__PURE__*/_jsxs("li", {
      className: styles.property,
      children: [label, ': ', value]
    }, `${label}-${value}`))
  });
};
ItemCharacteristics.defaultProps = {
  characteristics: null
};
export default ItemCharacteristics;