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

Official repo for Hack Oregon React component library

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) } })); }

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router";
import { css } from "emotion";
import localSVG from "../../assets/local/local.svg";
import usaSVG from "../../assets/country/usa.svg";
var cardsWrapper = css(_templateObject());
var card = css(_templateObject2());
var cardTextWrapper = css(_templateObject3());
var eyebrowStyle = css(_templateObject4());
var locationTitle = css(_templateObject5());
var iconWrapper = css(_templateObject6());
var locationResult = css(_templateObject7());
var whyStyle = 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.createElement("span", null, "We have Portland data!", React.createElement("br", null), React.createElement("span", {
    className: whyStyle
  }, React.createElement(Link, {
    to: "/cities/portland"
  }, "View here"))) : React.createElement("span", null, "There's no CIVIC data for ".concat(city, " yet!"), " ", React.createElement("span", {
    className: whyStyle
  }, React.createElement("a", {
    href: "#getStarted"
  }, "Why?")));
  return React.createElement("div", {
    className: cardsWrapper
  }, React.createElement("div", {
    className: card
  }, React.createElement("div", {
    className: iconWrapper
  }, React.createElement("img", {
    src: usaSVG,
    width: "100%"
  })), React.createElement("div", {
    className: cardTextWrapper
  }, React.createElement("span", {
    className: eyebrowStyle
  }, "National"), React.createElement("div", {
    className: locationTitle
  }, "USA"))), React.createElement("div", {
    className: card
  }, React.createElement("div", {
    className: iconWrapper
  }, React.createElement("img", {
    src: statePath,
    width: "100%"
  })), React.createElement("div", {
    className: cardTextWrapper
  }, React.createElement("span", {
    className: eyebrowStyle
  }, "State"), React.createElement("div", {
    className: locationTitle
  }, state || "?"))), React.createElement("div", {
    className: card
  }, React.createElement("div", {
    className: iconWrapper
  }, React.createElement("img", {
    src: localSVG,
    width: "70%"
  })), React.createElement("div", {
    className: cardTextWrapper
  }, React.createElement("span", {
    className: eyebrowStyle
  }, "Local"), React.createElement("div", {
    className: locationTitle
  }, React.createElement("div", {
    className: locationResult
  }, cityResult)))));
};

DataList.propTypes = {
  city: PropTypes.string,
  state: PropTypes.string
};
export default DataList;