react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
294 lines (284 loc) • 13.1 kB
JavaScript
"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 UndrawMessages = function UndrawMessages(props) {
return _react2.default.createElement(
"svg",
{
style: { height: props.height, width: '100%' },
className: props.class,
id: "174006fb-eaae-4ceb-a44a-e510ad2f60cc",
"data-name": "Layer 1",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 664 779.55"
},
_react2.default.createElement(
"defs",
null,
_react2.default.createElement(
"linearGradient",
{
id: "d9979445-c859-4563-868f-1ee7be59ec9d",
x1: 324.23,
y1: 775.01,
x2: 630.7,
y2: 51.33,
gradientTransform: "translate(-13.63 -2.04) rotate(-0.14)",
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: "4c4610df-9cbb-435b-8695-e49ccdd3dd10",
x1: 557.77,
y1: 856.45,
x2: 863.06,
y2: 135.54,
xlinkHref: "#d9979445-c859-4563-868f-1ee7be59ec9d"
}),
_react2.default.createElement("linearGradient", {
id: "1e21244c-e8bd-41cb-ba71-2767c5207691",
x1: 430.18,
y1: 453.24,
x2: 430.18,
y2: 294.18,
gradientTransform: "matrix(1, 0, 0, 1, 0, 0)",
xlinkHref: "#d9979445-c859-4563-868f-1ee7be59ec9d"
})
),
_react2.default.createElement(
"title",
null,
"messages1"
),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("path", {
d: "M645.11,60.78l-362.25.88A14.89,14.89,0,0,0,268,76.57l1.65,667.73a14.89,14.89,0,0,0,14.93,14.85l362.25-.88a14.89,14.89,0,0,0,14.85-14.92L660,75.62A14.89,14.89,0,0,0,645.11,60.78Z",
transform: "translate(-268 -60.22)",
fill: "url(#d9979445-c859-4563-868f-1ee7be59ec9d)"
}),
_react2.default.createElement("rect", {
x: 274.12,
y: 60.65,
width: 381.44,
height: 688.5,
rx: 13.64,
ry: 13.64,
transform: "translate(-268.98 -59.09) rotate(-0.14)",
fill: "#fff"
}),
_react2.default.createElement("path", {
d: "M645.62,251h0l-.38-159a14.49,14.49,0,0,0-14.52-14.45l-70.85.17a30.92,30.92,0,0,1-30.41,26.38l-131.75.32a30.92,30.92,0,0,1-30.54-26.23l-69.79.17a14.49,14.49,0,0,0-14.45,14.52l.39,160.34,1.13,464.66A14.49,14.49,0,0,0,299,732.3l333.34-.81A14.49,14.49,0,0,0,646.75,717Z",
transform: "translate(-268 -60.22)",
fill: "#bbb"
}),
_react2.default.createElement("rect", {
x: 418.12,
y: 86.18,
width: 85,
height: 5.31,
rx: 2,
ry: 2,
transform: "translate(-269.28 -53.29) rotate(-0.86)",
fill: "#dbdbdb"
}),
_react2.default.createElement("circle", {
cx: 521.17,
cy: 87.39,
r: 3.19,
transform: "translate(-269.25 -52.38) rotate(-0.86)",
fill: "#dbdbdb"
}),
_react2.default.createElement("rect", { x: 166.1, y: 103.52, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 131.84, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("ellipse", { cx: 78.09, cy: 118.92, rx: 33.54, ry: 33.7, fill: "#f5f5f5" }),
_react2.default.createElement("path", {
d: "M360.54,202.73H331.45a8.67,8.67,0,0,0-7.08,3.76,43.63,43.63,0,0,0,43,.24A8.66,8.66,0,0,0,360.54,202.73Z",
transform: "translate(-268 -60.22)",
fill: props.primaryColor
}),
_react2.default.createElement("path", {
d: "M331.69,180s-4.26,12.4-6.59,11.24c0,0,22.44,19.38,42.25,0A59.07,59.07,0,0,0,358.82,180Z",
transform: "translate(-268 -60.22)",
fill: "#333"
}),
_react2.default.createElement("circle", { cx: 78.07, cy: 118.62, r: 16.67, fill: "#333" }),
_react2.default.createElement("path", {
d: "M72.21,136.73H83.84a0,0,0,0,1,0,0v4.52a5.34,5.34,0,0,1-5.34,5.34h-1a5.34,5.34,0,0,1-5.34-5.34v-4.52A0,0,0,0,1,72.21,136.73Z",
opacity: 0.1
}),
_react2.default.createElement("path", {
d: "M73.44,136.45h9.18a1.23,1.23,0,0,1,1.23,1.23V141a5.34,5.34,0,0,1-5.34,5.34h-1A5.34,5.34,0,0,1,72.21,141v-3.29A1.23,1.23,0,0,1,73.44,136.45Z",
fill: "#fda57d"
}),
_react2.default.createElement("path", {
d: "M340.24,198.35a16.73,16.73,0,0,0,11.63,0V197H340.24Z",
transform: "translate(-268 -60.22)",
opacity: 0.1
}),
_react2.default.createElement("circle", { cx: 78.07, cy: 122.24, r: 16.67, fill: "#fda57d" }),
_react2.default.createElement("path", {
d: "M330.14,176.13h31.78s-2.71-12.83-14.73-12S330.14,176.13,330.14,176.13Z",
transform: "translate(-268 -60.22)",
fill: "#333"
}),
_react2.default.createElement("ellipse", { cx: 61.75, cy: 121.53, rx: 1.55, ry: 2.91, fill: "#fda57d" }),
_react2.default.createElement("ellipse", { cx: 94.31, cy: 121.53, rx: 1.55, ry: 2.91, fill: "#fda57d" }),
_react2.default.createElement("path", {
d: "M330.14,176.57h31.78s-2.71-12.83-14.73-12S330.14,176.57,330.14,176.57Z",
transform: "translate(-268 -60.22)",
opacity: 0.1
}),
_react2.default.createElement("rect", { x: 166.1, y: 211.38, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 239.7, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("ellipse", { cx: 78.09, cy: 226.78, rx: 33.54, ry: 33.7, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 319.24, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 347.56, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("ellipse", { cx: 78.09, cy: 334.64, rx: 33.54, ry: 33.7, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 427.1, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 455.42, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("ellipse", { cx: 78.09, cy: 442.5, rx: 33.54, ry: 33.7, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 534.96, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 166.1, y: 563.28, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("ellipse", { cx: 78.09, cy: 550.36, rx: 33.54, ry: 33.7, fill: "#e0e0e0" })
),
_react2.default.createElement("path", {
d: "M878.26,144.67,516,145.55a14.89,14.89,0,0,0-14.85,14.92l1.65,664.46a14.89,14.89,0,0,0,14.93,14.85L880,838.9A14.89,14.89,0,0,0,894.83,824l-1.65-664.46A14.89,14.89,0,0,0,878.26,144.67Z",
transform: "translate(-268 -60.22)",
fill: "url(#4c4610df-9cbb-435b-8695-e49ccdd3dd10)"
}),
_react2.default.createElement("rect", {
x: 507.27,
y: 141.27,
width: 381.44,
height: 688.5,
rx: 13.64,
ry: 13.64,
transform: "translate(-269.18 -58.52) rotate(-0.14)",
fill: "#fff"
}),
_react2.default.createElement("path", {
id: "9f21819d-df43-48b3-835e-9020276cbed3",
"data-name": "<Path>",
d: "M878.77,332.71l-.38-160.13a14.49,14.49,0,0,0-14.52-14.45L793,158.3a30.92,30.92,0,0,1-30.41,26.38L630.85,185a30.92,30.92,0,0,1-30.54-26.23l-69.79.17a14.49,14.49,0,0,0-14.45,14.52l.39,160.34",
transform: "translate(-268 -60.22)",
fill: "#fafafa"
}),
_react2.default.createElement("path", {
id: "c36a71a1-8927-4a8e-aa0b-340c78108d04",
"data-name": "<Path>",
d: "M516.46,333.81l1.13,464.66a14.49,14.49,0,0,0,14.52,14.45l333.34-.81a14.49,14.49,0,0,0,14.45-14.52l-1.14-466",
transform: "translate(-268 -60.22)",
fill: "#fafafa"
}),
_react2.default.createElement("rect", { x: 280.5, y: 164.53, width: 70.82, height: 70.82, fill: "#e0e0e0" }),
_react2.default.createElement(
"g",
{ opacity: 0.5 },
_react2.default.createElement("rect", {
x: 196.37,
y: 294.18,
width: 467.63,
height: 159.07,
fill: "url(#1e21244c-e8bd-41cb-ba71-2767c5207691)"
})
),
_react2.default.createElement("rect", { x: 201.94, y: 300.72, width: 456.5, height: 147.08, fill: "#fff" }),
_react2.default.createElement("rect", { x: 384, y: 355.19, width: 177.59, height: 14.16, fill: props.primaryColor }),
_react2.default.createElement("rect", { x: 384, y: 383.52, width: 177.59, height: 14.16, fill: props.primaryColor }),
_react2.default.createElement("rect", { x: 384, y: 512.08, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 384, y: 540.4, width: 177.59, height: 14.16, fill: "#eee" }),
_react2.default.createElement("rect", { x: 433.03, y: 221.18, width: 79.53, height: 25.06, fill: props.primaryColor }),
_react2.default.createElement("ellipse", { cx: 295.99, cy: 370.59, rx: 33.54, ry: 33.7, fill: "#f5f5f5" }),
_react2.default.createElement("path", {
d: "M578.44,454.4H549.34a8.67,8.67,0,0,0-7.08,3.76,43.63,43.63,0,0,0,43,.24A8.66,8.66,0,0,0,578.44,454.4Z",
transform: "translate(-268 -60.22)",
fill: props.primaryColor
}),
_react2.default.createElement("path", {
d: "M549.59,431.68s-4.26,12.4-6.59,11.24c0,0,22.44,19.38,42.25,0a59.07,59.07,0,0,0-8.53-11.24Z",
transform: "translate(-268 -60.22)",
fill: "#333"
}),
_react2.default.createElement("circle", { cx: 295.97, cy: 370.3, r: 16.67, fill: "#333" }),
_react2.default.createElement("path", {
d: "M290.11,388.41h11.63a0,0,0,0,1,0,0v4.52a5.34,5.34,0,0,1-5.34,5.34h-1a5.34,5.34,0,0,1-5.34-5.34v-4.52A0,0,0,0,1,290.11,388.41Z",
opacity: 0.1
}),
_react2.default.createElement("path", {
d: "M291.34,388.13h9.18a1.23,1.23,0,0,1,1.23,1.23v3.29A5.34,5.34,0,0,1,296.4,398h-1a5.34,5.34,0,0,1-5.34-5.34v-3.29a1.23,1.23,0,0,1,1.23-1.23Z",
fill: "#fda57d"
}),
_react2.default.createElement("path", {
d: "M558.13,450a16.73,16.73,0,0,0,11.63,0v-1.43H558.13Z",
transform: "translate(-268 -60.22)",
opacity: 0.1
}),
_react2.default.createElement("circle", { cx: 295.97, cy: 373.91, r: 16.67, fill: "#fda57d" }),
_react2.default.createElement("path", {
d: "M548,427.81h31.78s-2.71-12.83-14.73-12S548,427.81,548,427.81Z",
transform: "translate(-268 -60.22)",
fill: "#333"
}),
_react2.default.createElement("ellipse", { cx: 279.65, cy: 373.2, rx: 1.55, ry: 2.91, fill: "#fda57d" }),
_react2.default.createElement("ellipse", { cx: 312.2, cy: 373.2, rx: 1.55, ry: 2.91, fill: "#fda57d" }),
_react2.default.createElement("path", {
d: "M548,428.24h31.78s-2.71-12.83-14.73-12S548,428.24,548,428.24Z",
transform: "translate(-268 -60.22)",
opacity: 0.1
}),
_react2.default.createElement("ellipse", { cx: 317.78, cy: 528.57, rx: 33.54, ry: 33.7, fill: "#e0e0e0" }),
_react2.default.createElement("ellipse", { cx: 317.78, cy: 658.22, rx: 33.54, ry: 33.7, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 384, y: 637.37, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 384, y: 665.69, width: 177.59, height: 14.16, fill: "#eee" }),
_react2.default.createElement("rect", { x: 384, y: 164.53, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 384, y: 192.86, width: 177.59, height: 14.16, fill: "#e0e0e0" }),
_react2.default.createElement("rect", {
x: 651.27,
y: 166.8,
width: 85,
height: 5.31,
rx: 2,
ry: 2,
transform: "translate(-270.47 -49.77) rotate(-0.86)",
fill: "#dbdbdb"
}),
_react2.default.createElement("circle", {
cx: 754.32,
cy: 168.02,
r: 3.19,
transform: "translate(-270.44 -48.86) rotate(-0.86)",
fill: "#dbdbdb"
})
);
};
UndrawMessages.propTypes = {
/**
* Hex color
*/
primaryColor: _propTypes2.default.string,
/**
* percentage
*/
height: _propTypes2.default.string,
/**
* custom class for svg
*/
class: _propTypes2.default.string
};
UndrawMessages.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
exports.default = UndrawMessages;