@makeen.io/material-ui-kit/distr/molecules/Opportunity/index.js

Makeen UI components kit. Based on material-ui.

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n  display: flex;\n\n  padding: 24px 24px;\n  background: white;\n  border-radius: 4px;\n\n  box-sizing: border-box;\n\n  .info-column {\n    display: flex;\n    flex-direction: column;\n\n    padding-left: 16px;\n  }\n\n  .title {\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.6;\n    color: #222b45;\n  }\n\n  .desc {\n    font-size: 12px;\n    font-weight: normal;\n    line-height: 1.33;\n    color: #8f9bb3;\n\n    margin: 8px 0 0 0;\n  }\n\n  .manage-row {\n    display: flex;\n    justify-content: flex-end;\n\n    margin: 24px 0 0 0;\n\n    button {\n      margin: 0;\n    }\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { Avatar, Button } from "../../atoms";
import styled from "styled-components";
var OpportunityWrapper = styled.div(_templateObject());










































export default (function (_ref) {var project = _ref.project,onGetOnboard = _ref.onGetOnboard,survey = _ref.survey;var
    id = project.id,logo = project.logo,name = project.name,desc = project.desc,color = project.color;
  var image = null;
  if (logo) {var
      url = logo.url,variations = logo.variations;
    image = [url].concat(_toConsumableArray(variations)).join("/");
  }
  var onGetOnboardHandler = React.useCallback(function () {
    if (onGetOnboard) {
      onGetOnboard.apply(void 0, arguments);
    }
  }, [onGetOnboard]);
  var projectColors = [
  "primary",
  "warning",
  "info",
  "infoLight",
  "secondary"];

  return /*#__PURE__*/React.createElement(OpportunityWrapper, null, /*#__PURE__*/
  React.createElement(Avatar, { width: 40, height: 40, image: image, title: name, palette: [projectColors[color || 0]] }), /*#__PURE__*/
  React.createElement("div", { className: "info-column" }, /*#__PURE__*/
  React.createElement("div", { className: "title" }, name), /*#__PURE__*/
  React.createElement("div", { className: "desc" }, desc), /*#__PURE__*/
  React.createElement("div", { className: "manage-row" }, /*#__PURE__*/
  React.createElement(Button, { size: "medium", variant: "contained", palette: "primary", onClick: function onClick() {
      onGetOnboardHandler(id, survey.id);
    } }, "Get Onboard"))));
});
//# sourceMappingURL=index.js.map