react-undraw-illustrations/lib/components/UndrawNotebook/UndrawNotebook.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 UndrawNotebook = function UndrawNotebook(props) {
  return _react2.default.createElement(
    "svg",
    {
      style: { height: props.height, width: '100%' },
      className: props.class,
      id: "b6fc12fe-ef8e-4547-9b80-cc65bddfbdcc",
      "data-name": "Layer 1",
      xmlnsXlink: "http://www.w3.org/1999/xlink",
      viewBox: "0 0 808.12 716.61"
    },
    _react2.default.createElement(
      "defs",
      null,
      _react2.default.createElement(
        "linearGradient",
        {
          id: "ed96248d-4698-486b-a4de-994c4b868212",
          x1: 404.06,
          y1: 716.61,
          x2: 404.06,
          y2: 268.61,
          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: "19e667c4-6f71-4983-83f3-bdc836fc61a1",
        x1: 210.22,
        y1: 700.35,
        x2: 210.22,
        y2: 285.07,
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      }),
      _react2.default.createElement("linearGradient", {
        id: "a9513409-4da2-43cc-9c76-afee4a38ce48",
        x1: 428.16,
        y1: 792.05,
        x2: 428.16,
        y2: 376.77,
        gradientTransform: "matrix(-1, 0, 0, 1, 1026.06, -91.7)",
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      }),
      _react2.default.createElement("linearGradient", {
        id: "7ac6efeb-e6e1-46af-b5fe-b7efb8ee1379",
        x1: 175.09,
        y1: 610.02,
        x2: 175.09,
        y2: 495.85,
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      }),
      _react2.default.createElement("linearGradient", {
        id: "14a2a5b5-64cc-4fe8-b0e6-f15ac830e947",
        x1: 662.51,
        y1: 626.33,
        x2: 662.51,
        y2: 594.97,
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      }),
      _react2.default.createElement("linearGradient", {
        id: "e2bd95a9-e695-4a74-8d7c-3533af243856",
        x1: 872.5,
        y1: 269.91,
        x2: 872.5,
        y2: 127.91,
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      }),
      _react2.default.createElement("linearGradient", {
        id: "a6752e00-ae16-4d29-b62a-f8206f0a04a1",
        x1: 458.97,
        y1: 247.52,
        x2: 458.97,
        y2: 101.87,
        gradientTransform: "translate(634.16 -275.97) rotate(90)",
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      }),
      _react2.default.createElement("linearGradient", {
        id: "f9b0df9c-8115-4cd0-ada0-65f11e2c9179",
        x1: 359.97,
        y1: 267.52,
        x2: 359.97,
        y2: 121.87,
        gradientTransform: "translate(553.22 -173.51) rotate(90)",
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      }),
      _react2.default.createElement(
        "linearGradient",
        {
          id: "3de726b5-1495-4a3c-a21e-83c396d56dc7",
          x1: 395.06,
          y1: 492.11,
          x2: 413.06,
          y2: 492.11,
          gradientUnits: "userSpaceOnUse"
        },
        _react2.default.createElement("stop", { offset: 0, stopColor: "#fff", stopOpacity: 0.12 }),
        _react2.default.createElement("stop", { offset: 0.54, stopColor: "gray", stopOpacity: 0.12 }),
        _react2.default.createElement("stop", { offset: 1, stopColor: "#fff", stopOpacity: 0.12 })
      ),
      _react2.default.createElement("linearGradient", {
        id: "1dcf2d63-9f57-411e-ae8f-263acd821179",
        x1: 360.06,
        y1: 473.61,
        x2: 360.06,
        y2: 291.61,
        xlinkHref: "#ed96248d-4698-486b-a4de-994c4b868212"
      })
    ),
    _react2.default.createElement(
      "title",
      null,
      "notebook"
    ),
    _react2.default.createElement("rect", {
      y: 268.61,
      width: 808.12,
      height: 448,
      fill: "url(#ed96248d-4698-486b-a4de-994c4b868212)"
    }),
    _react2.default.createElement("rect", { x: 8.55, y: 274.55, width: 791.03, height: 436.12, fill: "#f5f5f5" }),
    _react2.default.createElement("rect", {
      x: 16.37,
      y: 285.07,
      width: 387.68,
      height: 415.29,
      fill: "url(#19e667c4-6f71-4983-83f3-bdc836fc61a1)"
    }),
    _react2.default.createElement("rect", {
      x: 404.06,
      y: 285.07,
      width: 387.68,
      height: 415.29,
      fill: "url(#a9513409-4da2-43cc-9c76-afee4a38ce48)"
    }),
    _react2.default.createElement("rect", { x: 22.65, y: 291.34, width: 381.41, height: 402.74, fill: "#fff" }),
    _react2.default.createElement("rect", { x: 404.06, y: 291.34, width: 381.41, height: 402.74, fill: "#fff" }),
    _react2.default.createElement("rect", {
      x: 56.52,
      y: 318.94,
      width: 268.49,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 56.52,
      y: 351.56,
      width: 100.37,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 194.53,
      y: 351.56,
      width: 100.37,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", { x: 224.64, y: 638.88, width: 100.37, height: 15.06, fill: props.primaryColor }),
    _react2.default.createElement("rect", { x: 224.64, y: 638.88, width: 100.37, height: 15.06, opacity: 0.2 }),
    _react2.default.createElement("rect", {
      x: 56.52,
      y: 384.19,
      width: 268.49,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 56.52,
      y: 416.81,
      width: 160.59,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 463.03,
      y: 318.94,
      width: 268.49,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 463.03,
      y: 351.56,
      width: 100.37,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 601.04,
      y: 351.56,
      width: 100.37,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 463.03,
      y: 384.19,
      width: 268.49,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 463.03,
      y: 416.81,
      width: 160.59,
      height: 15.06,
      fill: props.primaryColor,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 52.76,
      y: 495.85,
      width: 244.66,
      height: 114.17,
      fill: "url(#7ac6efeb-e6e1-46af-b5fe-b7efb8ee1379)"
    }),
    _react2.default.createElement("rect", { x: 56.52, y: 500.87, width: 238.38, height: 105.39, fill: props.primaryColor }),
    _react2.default.createElement("polygon", {
      points: "781.22 599.9 766.09 600.23 766.43 594.97 728.06 595.79 758.42 600.39 590.7 604.02 590.78 607.96 568.29 608.44 568.45 615.59 568.36 611.72 543.32 616.86 568.53 619.6 568.63 624.19 591.13 623.71 591.18 626.33 781.71 622.21 781.22 599.9",
      fill: "url(#14a2a5b5-64cc-4fe8-b0e6-f15ac830e947)"
    }),
    _react2.default.createElement("rect", {
      x: 792.06,
      y: 694.95,
      width: 180.67,
      height: 21.33,
      transform: "translate(1584.02 1300.14) rotate(178.75)",
      fill: "#3ad29f"
    }),
    _react2.default.createElement("rect", {
      x: 770.77,
      y: 700.88,
      width: 25.09,
      height: 15.06,
      transform: "translate(1385.95 1307.87) rotate(178.75)",
      fill: "#3ad29f"
    }),
    _react2.default.createElement("polygon", {
      points: "574.9 620.12 551 617.5 574.74 612.59 574.9 620.12",
      fill: props.primaryColor
    }),
    _react2.default.createElement("polyline", {
      points: "762.11 602.86 762.52 596.57 726.14 597.37",
      fill: "none",
      stroke: "#3ad29f",
      strokeMiterlimit: 10,
      strokeWidth: 3
    }),
    _react2.default.createElement("line", {
      x1: 648,
      y1: 569.33,
      x2: 664.32,
      y2: 578.71,
      fill: "#fccc63",
      stroke: "#37474f",
      strokeLinecap: "round",
      strokeMiterlimit: 10,
      strokeWidth: 5
    }),
    _react2.default.createElement("line", {
      x1: 462.51,
      y1: 462.78,
      x2: 478.83,
      y2: 472.15,
      fill: "#fccc63",
      stroke: "#37474f",
      strokeLinecap: "round",
      strokeMiterlimit: 10,
      strokeWidth: 5
    }),
    _react2.default.createElement("circle", {
      cx: 804.78,
      cy: 638.53,
      r: 45.17,
      transform: "translate(-345.71 926.61) rotate(-60.12)",
      fill: "#cfd8dc"
    }),
    _react2.default.createElement("circle", {
      cx: 714.25,
      cy: 585.81,
      r: 45.17,
      transform: "translate(-345.43 821.65) rotate(-60.12)",
      fill: "#cfd8dc"
    }),
    _react2.default.createElement("circle", {
      cx: 714.25,
      cy: 585.81,
      r: 38.89,
      transform: "translate(-345.43 821.65) rotate(-60.12)",
      fill: "#fff",
      opacity: 0.2
    }),
    _react2.default.createElement("circle", {
      cx: 805.63,
      cy: 638.3,
      r: 38.89,
      transform: "translate(-345.08 927.23) rotate(-60.12)",
      fill: "#fff",
      opacity: 0.2
    }),
    _react2.default.createElement("line", {
      x1: 557.24,
      y1: 515.75,
      x2: 570.29,
      y2: 523.25,
      fill: "#fccc63",
      stroke: "#37474f",
      strokeMiterlimit: 10,
      strokeWidth: 5
    }),
    _react2.default.createElement("path", {
      d: "M685.64,575.16a38.9,38.9,0,0,1,64.42-4.51,38.89,38.89,0,1,0-66.51,39A38.83,38.83,0,0,1,685.64,575.16Z",
      transform: "translate(-195.94 -91.7)",
      fill: "#fff",
      opacity: 0.2
    }),
    _react2.default.createElement("path", {
      d: "M777,627.65a38.9,38.9,0,0,1,64.42-4.51,38.89,38.89,0,1,0-66.51,39A38.83,38.83,0,0,1,777,627.65Z",
      transform: "translate(-195.94 -91.7)",
      fill: "#fff",
      opacity: 0.2
    }),
    _react2.default.createElement("path", {
      d: "M950.92,188.37h-24.5c-4.66-34.7-34.37-60.46-70.34-60.46a71,71,0,0,0,0,142c36.34,0,66.29-26.31,70.48-61.52h24.36c5,0,9-5.05,9-10S955.87,188.37,950.92,188.37Z",
      transform: "translate(-195.94 -91.7)",
      fill: "url(#e2bd95a9-e695-4a74-8d7c-3533af243856)"
    }),
    _react2.default.createElement("path", {
      d: "M946.5,189.91H923.38a67,67,0,1,0,.13,17h23a8.5,8.5,0,0,0,0-17Z",
      transform: "translate(-195.94 -91.7)",
      fill: "#f2f2f2"
    }),
    _react2.default.createElement("circle", { cx: 663.06, cy: 107.21, r: 52, fill: "#985454" }),
    _react2.default.createElement("path", {
      d: "M867,155.91s35,2,32,46",
      transform: "translate(-195.94 -91.7)",
      fill: "none",
      stroke: "#fff",
      strokeMiterlimit: 10,
      strokeWidth: 4,
      opacity: 0.2
    }),
    _react2.default.createElement("rect", {
      x: 386.64,
      y: 64.51,
      width: 145.65,
      height: 236.99,
      transform: "translate(7.51 514.45) rotate(-80.54)",
      fill: "url(#a6752e00-ae16-4d29-b62a-f8206f0a04a1)"
    }),
    _react2.default.createElement("rect", {
      x: 392.79,
      y: 67.49,
      width: 135.93,
      height: 228.96,
      transform: "translate(9.61 514.86) rotate(-80.54)",
      fill: "#fff"
    }),
    _react2.default.createElement(
      "g",
      { opacity: 0.6 },
      _react2.default.createElement("rect", {
        x: 542.67,
        y: 139.79,
        width: 29.13,
        height: 21.56,
        transform: "translate(-163.62 -181.22) rotate(9.46)",
        fill: props.primaryColor
      }),
      _react2.default.createElement("rect", {
        x: 428.86,
        y: 184.91,
        width: 111.86,
        height: 6.99,
        transform: "translate(-158.39 -168.8) rotate(9.46)",
        fill: props.primaryColor
      }),
      _react2.default.createElement("rect", {
        x: 426.38,
        y: 199.67,
        width: 81.56,
        height: 4.66,
        transform: "translate(-156.4 -165.72) rotate(9.46)",
        fill: props.primaryColor
      })
    ),
    _react2.default.createElement("rect", {
      x: 285.7,
      y: 67.97,
      width: 145.65,
      height: 236.99,
      transform: "translate(-80.26 417.78) rotate(-80.54)",
      fill: "url(#f9b0df9c-8115-4cd0-ada0-65f11e2c9179)"
    }),
    _react2.default.createElement("rect", {
      x: 291.85,
      y: 70.95,
      width: 135.93,
      height: 228.96,
      transform: "translate(-78.16 418.18) rotate(-80.54)",
      fill: "#fff"
    }),
    _react2.default.createElement(
      "g",
      { opacity: 0.6 },
      _react2.default.createElement("rect", {
        x: 441.73,
        y: 143.25,
        width: 29.13,
        height: 21.56,
        transform: "translate(-164.43 -164.58) rotate(9.46)",
        fill: props.primaryColor
      }),
      _react2.default.createElement("rect", {
        x: 327.92,
        y: 188.37,
        width: 111.86,
        height: 6.99,
        transform: "translate(-159.2 -152.16) rotate(9.46)",
        fill: props.primaryColor
      }),
      _react2.default.createElement("rect", {
        x: 325.44,
        y: 203.13,
        width: 81.56,
        height: 4.66,
        transform: "translate(-157.2 -149.08) rotate(9.46)",
        fill: props.primaryColor
      })
    ),
    _react2.default.createElement("rect", {
      x: 395.06,
      y: 290.61,
      width: 18,
      height: 403,
      fill: "url(#3de726b5-1495-4a3c-a21e-83c396d56dc7)"
    }),
    _react2.default.createElement("polygon", {
      points: "395.06 473.61 360.63 443.62 325.06 473.61 325.06 291.61 395.06 291.61 395.06 473.61",
      fill: "url(#1dcf2d63-9f57-411e-ae8f-263acd821179)"
    }),
    _react2.default.createElement("polygon", {
      points: "390.06 467.61 360.06 438.61 329.06 467.61 329.06 291.61 390.06 291.61 390.06 467.61",
      fill: "#3ad29f"
    })
  );
};

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

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

exports.default = UndrawNotebook;