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

Makeen UI components kit. Based on material-ui.

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n  padding: 24px;\n  background: white;\n  border-radius: 4px;\n\n  display: flex;\n  flex-direction: column;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    &__block {\n      display: flex;\n      flex-direction: column;\n\n      &_left-align {\n        align-items: flex-start;\n      }\n\n      &_right-align {\n        align-items: flex-end;\n      }\n    }\n\n    &__title {\n      font-size: 10px;\n      font-weight: normal;\n      letter-spacing: normal;\n      color: #8f9bb3;\n\n      margin: 0;\n    }\n\n    &__subtitle {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.6;\n      color: #222b45;\n\n      margin: 0;\n    }\n\n    &__date {\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 1.33;\n      color: #222b45;\n\n      margin: 0;\n    }\n  }\n\n  .desc {\n    font-size: 10px;\n    line-height: normal;\n    color: #8f9bb3;\n\n    margin: 16px 0 0 0;\n  }\n\n  .manage-row {\n    margin: 24px 0 0 0;\n    display: flex;\n\n    justify-content: flex-end;\n\n    button {\n      margin: 0;\n    }\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { Grid } from "@material-ui/core";
import { Button } from "../../atoms";
import moment from "moment";
import styled from "styled-components";
var SurveySummaryWrapper = styled.div(_templateObject());








































































export default (function (_ref) {var id = _ref.id,title = _ref.title,isNew = _ref.isNew,date = _ref.date,desc = _ref.desc,onStartSurvey = _ref.onStartSurvey;
  var onStartSurveyHandler = React.useCallback(function () {return onStartSurvey.apply(void 0, arguments);}, [onStartSurvey]);
  return /*#__PURE__*/React.createElement(SurveySummaryWrapper, null, /*#__PURE__*/
  React.createElement("div", { className: "header" }, /*#__PURE__*/
  React.createElement(Grid, { item: true, xs: 6, sm: 6, md: 6, lg: 6, className: "header__block header__block_left-align" }, /*#__PURE__*/
  React.createElement("p", { className: "header__title" }, title), /*#__PURE__*/
  React.createElement("p", { className: "header__subtitle" }, isNew ? "Review Survey" : "Final Project Survey")),
  date && /*#__PURE__*/React.createElement(Grid, { item: true, xs: 6, sm: 6, md: 6, lg: 6, className: "header__block header__block_right-align" }, /*#__PURE__*/
  React.createElement("p", { className: "header__title" }, "Due Date"), /*#__PURE__*/
  React.createElement("p", { className: "header__date" }, moment(date).format("LL")))), /*#__PURE__*/
  React.createElement("p", { className: "desc" }, desc), /*#__PURE__*/
  React.createElement("div", { className: "manage-row" }, /*#__PURE__*/
  React.createElement(Button, { size: "medium", variant: "contained", palette: isNew ? "primary" : "info", onClick: function onClick() {return onStartSurveyHandler(id);} }, isNew ? "Start Survey" : "Continue Survey")));
});
//# sourceMappingURL=index.js.map