{"size": 3301, "ext": "js", "max_stars_repo_path": "lib/ComparibleColors.js", "max_stars_repo_name": "hxf31891/react-gradient-color-picker", "max_stars_repo_stars_event_min_datetime": "2022-02-22T15:20:56.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-11T08:03:38.000Z", "max_issues_repo_path": "lib/ComparibleColors.js", "max_issues_repo_name": "hxf31891/react-gradient-color-picker", "max_issues_repo_issues_event_min_datetime": "2022-03-11T08:03:13.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-15T06:55:28.000Z", "max_forks_repo_path": "lib/ComparibleColors.js", "max_forks_repo_name": "hxf31891/react-gradient-color-picker", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 3, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 23.7482014388, "max_line_length": 77, "alphanum_fraction": 0.5386246592}
import React from 'react';
import { usePicker } from './context';

const ComparibleColors = ({
  openComparibles
}) => {
  const {
    tinyColor,
    handleChange
  } = usePicker();
  const analogous = tinyColor.analogous();
  const monochromatic = tinyColor.monochromatic();
  const triad = tinyColor.triad();
  const tetrad = tinyColor.tetrad();

  const handleClick = tiny => {
    let {
      r,
      g,
      b,
      a
    } = tiny.toRgb();
    handleChange(`rgba(${r},${g},${b},${a})`);
  };

  return /*#__PURE__*/React.createElement("div", {
    style: {
      height: openComparibles ? 216 : 0,
      width: '100%',
      transition: 'all 120ms linear'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      paddingTop: 11,
      display: openComparibles ? '' : 'none'
    },
    className: "ps-rl"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center',
      color: '#323136',
      fontSize: 13,
      fontWeight: 600,
      position: 'absolute',
      top: 6.5,
      left: 2
    }
  }, "Color Guide"), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center',
      color: '#323136',
      fontSize: 12,
      fontWeight: 500,
      marginTop: 3
    }
  }, "Analogous"), /*#__PURE__*/React.createElement("div", {
    className: "df",
    style: {
      borderRadius: 5,
      overflow: 'hidden'
    }
  }, analogous?.map((c, key) => /*#__PURE__*/React.createElement("div", {
    key: key,
    style: {
      width: '20%',
      height: 30,
      background: c.toHexString()
    },
    onClick: () => handleClick(c)
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center',
      color: '#323136',
      fontSize: 12,
      fontWeight: 500,
      marginTop: 3
    }
  }, "Monochromatic"), /*#__PURE__*/React.createElement("div", {
    className: "df jfe",
    style: {
      borderRadius: 5,
      overflow: 'hidden'
    }
  }, monochromatic?.map((c, key) => /*#__PURE__*/React.createElement("div", {
    key: key,
    style: {
      width: '20%',
      height: 30,
      background: c.toHexString()
    },
    onClick: () => handleClick(c)
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center',
      color: '#323136',
      fontSize: 12,
      fontWeight: 500,
      marginTop: 3
    }
  }, "Triad"), /*#__PURE__*/React.createElement("div", {
    className: "df jfe",
    style: {
      borderRadius: 5,
      overflow: 'hidden'
    }
  }, triad?.map((c, key) => /*#__PURE__*/React.createElement("div", {
    key: key,
    style: {
      width: 'calc(100% / 3)',
      height: 28,
      background: c.toHexString()
    },
    onClick: () => handleClick(c)
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center',
      color: '#323136',
      fontSize: 12,
      fontWeight: 500,
      marginTop: 3
    }
  }, "Tetrad"), /*#__PURE__*/React.createElement("div", {
    className: "df jfe",
    style: {
      borderRadius: 5,
      overflow: 'hidden'
    }
  }, tetrad?.map((c, key) => /*#__PURE__*/React.createElement("div", {
    key: key,
    style: {
      width: '25%',
      height: 28,
      background: c.toHexString()
    },
    onClick: () => handleClick(c)
  })))));
};

export default ComparibleColors;