react-undraw-illustrations/lib/components/UndrawTyping/UndrawTyping.js

unDraw: MIT licensed illustrations for every project you can imagine and create...for React!

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var UndrawTyping = function UndrawTyping(props) {
  return _react2.default.createElement(
    "svg",
    {
      style: { height: props.height, width: '100%' },
      className: props.class,
      id: "0d3bee8d-6283-4722-b2f5-6188c764ca3b",
      "data-name": "Layer 1",
      xmlnsXlink: "http://www.w3.org/1999/xlink",
      viewBox: "0 0 885 657"
    },
    _react2.default.createElement(
      "defs",
      null,
      _react2.default.createElement(
        "linearGradient",
        {
          id: "e4e73d90-53f9-4a31-ac8c-cd2f87b1a869",
          x1: 2330.5,
          y1: 628,
          x2: 2330.5,
          y2: 120,
          gradientTransform: "matrix(-1, 0, 0, 1, 2630, -120)",
          gradientUnits: "userSpaceOnUse"
        },
        _react2.default.createElement("stop", { offset: 0, stopColor: "gray", stopOpacity: 0.25 }),
        _react2.default.createElement("stop", { offset: 0.54, stopColor: "gray", stopOpacity: 0.12 }),
        _react2.default.createElement("stop", { offset: 1, stopColor: "gray", stopOpacity: 0.1 })
      ),
      _react2.default.createElement("linearGradient", {
        id: "656a49b8-0e74-4269-923d-a5cb8c729e5a",
        x1: 589,
        y1: 657,
        x2: 589,
        y2: 150,
        gradientTransform: "matrix(1, 0, 0, 1, 0, 0)",
        xlinkHref: "#e4e73d90-53f9-4a31-ac8c-cd2f87b1a869"
      }),
      _react2.default.createElement("linearGradient", {
        id: "4ac03110-48b7-4c46-9a7b-750500b44d13",
        x1: 483.99,
        y1: 408.82,
        x2: 483.99,
        y2: 324.2,
        gradientTransform: "matrix(1, 0, 0, 1, 0, 0)",
        xlinkHref: "#e4e73d90-53f9-4a31-ac8c-cd2f87b1a869"
      }),
      _react2.default.createElement("linearGradient", {
        id: "659745b9-c7a7-4aa8-bbf0-7b73c169c514",
        x1: 589.48,
        y1: 408.82,
        x2: 589.48,
        y2: 324.2,
        gradientTransform: "matrix(1, 0, 0, 1, 0, 0)",
        xlinkHref: "#e4e73d90-53f9-4a31-ac8c-cd2f87b1a869"
      }),
      _react2.default.createElement("linearGradient", {
        id: "ee701dec-23cf-49d9-a833-d49e1cd62e17",
        x1: 694.96,
        y1: 408.82,
        x2: 694.96,
        y2: 324.2,
        gradientTransform: "matrix(1, 0, 0, 1, 0, 0)",
        xlinkHref: "#e4e73d90-53f9-4a31-ac8c-cd2f87b1a869"
      })
    ),
    _react2.default.createElement(
      "title",
      null,
      "typing"
    ),
    _react2.default.createElement("polygon", {
      points: "0 0 599 0 599 434.06 218.15 434.06 177 508 133.77 434.06 0 434.06 0 0",
      fill: "url(#e4e73d90-53f9-4a31-ac8c-cd2f87b1a869)"
    }),
    _react2.default.createElement("polygon", {
      points: "7.57 8.33 589.48 8.33 589.48 427.95 211.79 427.95 176.81 503.3 137.52 427.95 7.57 427.95 7.57 8.33",
      fill: "#f5f5f5"
    }),
    _react2.default.createElement("rect", {
      x: 237.18,
      y: 254.1,
      width: 433.53,
      height: 18.55,
      transform: "translate(751.89 406.75) rotate(-180)",
      fill: props.primaryColor,
      opacity: 0.3
    }),
    _react2.default.createElement("rect", {
      x: 237.18,
      y: 294.67,
      width: 433.53,
      height: 18.55,
      transform: "translate(751.89 487.89) rotate(-180)",
      fill: props.primaryColor,
      opacity: 0.3
    }),
    _react2.default.createElement("rect", {
      x: 237.18,
      y: 335.24,
      width: 433.53,
      height: 18.55,
      transform: "translate(751.89 569.03) rotate(-180)",
      fill: props.primaryColor,
      opacity: 0.3
    }),
    _react2.default.createElement("rect", {
      x: 237.18,
      y: 375.81,
      width: 433.53,
      height: 18.55,
      transform: "translate(751.89 650.17) rotate(-180)",
      fill: props.primaryColor,
      opacity: 0.3
    }),
    _react2.default.createElement("polygon", {
      points: "885 150 293 150 293 583.21 675 583 711 657 752.79 583.21 885 583.21 885 150",
      fill: "url(#656a49b8-0e74-4269-923d-a5cb8c729e5a)"
    }),
    _react2.default.createElement("polygon", {
      points: "880.43 156.7 298.52 156.7 298.52 576.32 676.21 576.32 711.19 651.67 750.48 576.32 880.43 576.32 880.43 156.7",
      fill: "#fff"
    }),
    _react2.default.createElement("circle", {
      cx: 483.99,
      cy: 366.51,
      r: 42.31,
      fill: "url(#4ac03110-48b7-4c46-9a7b-750500b44d13)"
    }),
    _react2.default.createElement("circle", {
      cx: 589.48,
      cy: 366.51,
      r: 42.31,
      fill: "url(#659745b9-c7a7-4aa8-bbf0-7b73c169c514)"
    }),
    _react2.default.createElement("circle", {
      cx: 694.96,
      cy: 366.51,
      r: 42.31,
      fill: "url(#ee701dec-23cf-49d9-a833-d49e1cd62e17)"
    }),
    _react2.default.createElement("circle", { cx: 483.99, cy: 366.51, r: 38.25, fill: props.primaryColor }),
    _react2.default.createElement("circle", { cx: 589.48, cy: 366.51, r: 38.25, fill: props.primaryColor, opacity: 0.6 }),
    _react2.default.createElement("circle", { cx: 694.96, cy: 366.51, r: 38.25, fill: props.primaryColor, opacity: 0.3 })
  );
};

UndrawTyping.propTypes = {
  /**
   * Hex color
   */
  primaryColor: _propTypes2.default.string,
  /**
   * percentage
   */
  height: _propTypes2.default.string,
  /**
   * custom class for svg
   */
  class: _propTypes2.default.string
};

UndrawTyping.defaultProps = {
  primaryColor: "#6c68fb",
  height: "250px",
  class: ""
};

exports.default = UndrawTyping;