@shopgate/engage/product/components/Swatch/Swatch.js

Shopgate's ENGAGE library.

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { useWidgetStyles } from "../../../core";
import SwatchContent from "./SwatchContent";
import { jsx as _jsx } from "react/jsx-runtime";
export const WIDGET_ID = '@shopgate/engage/product/Swatch';

/**
 * The swatch component.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
const Swatch = ({
  swatch
}) => {
  const styles = useWidgetStyles(WIDGET_ID);
  if (!swatch) {
    return null;
  }
  const classNames = {
    swatch: styles && styles.swatch ? css(styles.swatch).toString() : null,
    item: styles && styles.item ? css(styles.item).toString() : null,
    itemSelected: styles && styles.itemSelected ? css(styles.itemSelected).toString() : null
  };
  return /*#__PURE__*/_jsx(SwatchContent, {
    swatch: swatch,
    classNames: classNames
  });
};
Swatch.defaultProps = {
  swatch: null
};
export default /*#__PURE__*/memo(Swatch);