@hackoregon/component-library/dist/LandingPage/DataList.js

Official repo for Hack Oregon React component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactRouter = require("react-router");

var _emotion = require("emotion");

var _local = _interopRequireDefault(require("../../assets/local/local.svg"));

var _usa = _interopRequireDefault(require("../../assets/country/usa.svg"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  color: #ef495c;\n\n  a {\n    border: none;\n    text-decoration: none;\n\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"]);

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

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  color: white;\n  font-family: \"Rubik\", sans-serif;\n  font-size: 14px;\n  width: 180px;\n"]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 100px;\n  margin: 0;\n  margin-right: 24px;\n  text-align: center;\n"]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  display: block;\n  font-family: \"Rubik\";\n  font-size: 18px;\n  color: white;\n"]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  display: block;\n  font-family: \"Rubik\";\n  font-size: 14px;\n  color: #ee495c;\n"]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  vertical-align: top;\n  width: 50%;\n"]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  font-family: \"Rubik\";\n  position: relative;\n  background-color: transparent;\n  font-size: 2vw;\n  flex: 0 0 auto;\n  width: 100%;\n  padding: 12px 0;\n  box-sizing: border-box;\n  text-align: left;\n  margin: 6px 0px;\n  transition: all 0.3s ease-in-out;\n\n  :not(:last-child):before {\n    content: \"\";\n    height: 40px;\n    border-right: 1px solid #ec485b;\n    top: 82%;\n    left: 50px;\n    position: absolute;\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-around;\n  padding: 0;\n  margin: 0;\n  flex-wrap: wrap;\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) } })); }

var cardsWrapper = (0, _emotion.css)(_templateObject());
var card = (0, _emotion.css)(_templateObject2());
var cardTextWrapper = (0, _emotion.css)(_templateObject3());
var eyebrowStyle = (0, _emotion.css)(_templateObject4());
var locationTitle = (0, _emotion.css)(_templateObject5());
var iconWrapper = (0, _emotion.css)(_templateObject6());
var locationResult = (0, _emotion.css)(_templateObject7());
var whyStyle = (0, _emotion.css)(_templateObject8());

var DataList = function DataList(_ref) {
  var city = _ref.city,
      state = _ref.state;
  var missingStates = [];
  var fileName = state && !missingStates.includes(state) ? "state/".concat(state) : "local/local";

  var statePath = require("../../assets/".concat(fileName, ".svg"));

  var cityResult = city === "Portland" ? _react["default"].createElement("span", null, "We have Portland data!", _react["default"].createElement("br", null), _react["default"].createElement("span", {
    className: whyStyle
  }, _react["default"].createElement(_reactRouter.Link, {
    to: "/cities/portland"
  }, "View here"))) : _react["default"].createElement("span", null, "There's no CIVIC data for ".concat(city, " yet!"), " ", _react["default"].createElement("span", {
    className: whyStyle
  }, _react["default"].createElement("a", {
    href: "#getStarted"
  }, "Why?")));
  return _react["default"].createElement("div", {
    className: cardsWrapper
  }, _react["default"].createElement("div", {
    className: card
  }, _react["default"].createElement("div", {
    className: iconWrapper
  }, _react["default"].createElement("img", {
    src: _usa["default"],
    width: "100%"
  })), _react["default"].createElement("div", {
    className: cardTextWrapper
  }, _react["default"].createElement("span", {
    className: eyebrowStyle
  }, "National"), _react["default"].createElement("div", {
    className: locationTitle
  }, "USA"))), _react["default"].createElement("div", {
    className: card
  }, _react["default"].createElement("div", {
    className: iconWrapper
  }, _react["default"].createElement("img", {
    src: statePath,
    width: "100%"
  })), _react["default"].createElement("div", {
    className: cardTextWrapper
  }, _react["default"].createElement("span", {
    className: eyebrowStyle
  }, "State"), _react["default"].createElement("div", {
    className: locationTitle
  }, state || "?"))), _react["default"].createElement("div", {
    className: card
  }, _react["default"].createElement("div", {
    className: iconWrapper
  }, _react["default"].createElement("img", {
    src: _local["default"],
    width: "70%"
  })), _react["default"].createElement("div", {
    className: cardTextWrapper
  }, _react["default"].createElement("span", {
    className: eyebrowStyle
  }, "Local"), _react["default"].createElement("div", {
    className: locationTitle
  }, _react["default"].createElement("div", {
    className: locationResult
  }, cityResult)))));
};

DataList.propTypes = {
  city: _propTypes["default"].string,
  state: _propTypes["default"].string
};
var _default = DataList;
exports["default"] = _default;