@hackoregon/component-library/es/PackageSelectorBox/PackageSelectorBox.js

Official repo for Hack Oregon React component library

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: 6px;\n  transition: ", ";\n  color: #fff;\n  background: ", ";\n  cursor: pointer;\n  border: 1px solid ", ";\n  min-height: 134px;\n\n  @media (min-width: 600px) {\n    min-height: 186px;\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: #fff;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  h2 {\n    margin: 0;\n    text-align: center;\n  }\n\n  p {\n    color: #fff;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import PropTypes from "prop-types";
import React from "react";
import { css } from "emotion";
var backgroundColor = "rgb(69, 69, 69)";
var accentColor = "rgb(237, 73, 91)";
var borderColor = "rgb(151, 151, 151)";
var commonTransition = "all .2s ease-in-out";
var packageSelectorClass = css(_templateObject(), commonTransition, backgroundColor, borderColor, accentColor);

var PackageSelector = function PackageSelector(_ref) {
  var title = _ref.title,
      description = _ref.description,
      onClick = _ref.onClick;
  return React.createElement("div", {
    className: packageSelectorClass,
    onClick: onClick
  }, React.createElement("h2", null, title), React.createElement("p", null, description));
};

PackageSelector.displayName = "PackageSelector";
PackageSelector.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  onClick: PropTypes.func
};
export default PackageSelector;