react-undraw-illustrations/src/node_modules/components/UndrawWindows/UndrawWindows.js

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

import React from "react";
import PropTypes from "prop-types";

const UndrawWindows = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="e8345542-4160-463b-841e-d6381701a249"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 1014.92 616.5"
  >
    <defs>
      <linearGradient
        id="b96c1e95-21f7-460f-8fe8-281b03b6a731"
        x1={223}
        y1={366.33}
        x2={223}
        gradientUnits="userSpaceOnUse"
      >
        <stop offset={0} stopColor="gray" stopOpacity={0.25} />
        <stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
        <stop offset={1} stopColor="gray" stopOpacity={0.1} />
      </linearGradient>
      <linearGradient
        id="fdf2261c-aea2-449f-acb5-ed46fbfe76ac"
        x1={315}
        y1={481.74}
        x2={315}
        y2={115.42}
        gradientTransform="matrix(-1, 0, 0, 1, 1106.92, -115.42)"
        xlinkHref="#b96c1e95-21f7-460f-8fe8-281b03b6a731"
      />
      <linearGradient
        id="bdb7606e-5185-43e5-b133-41bac9927d37"
        x1={508}
        y1={616.5}
        x2={508}
        y2={159.83}
        xlinkHref="#b96c1e95-21f7-460f-8fe8-281b03b6a731"
      />
    </defs>
    <title>windows</title>
    <g opacity={0.5}>
      <rect
        width={446}
        height={366.33}
        fill="url(#b96c1e95-21f7-460f-8fe8-281b03b6a731)"
      />
    </g>
    <rect x={5.2} y={6.93} width={434.74} height={353.34} fill="#f2f2f2" />
    <rect x={5.2} y={6.93} width={434.74} height={78.81} fill={props.primaryColor} />
    <rect x={5.2} y={6.93} width={434.74} height={78.81} opacity={0.1} />
    <rect x={39.84} y={114.31} width={365.46} height={45.9} fill="#e0e0e0" />
    <rect x={39.84} y={194.85} width={266.73} height={15.59} fill="#e0e0e0" />
    <rect x={39.84} y={221.7} width={173.2} height={15.59} fill="#e0e0e0" />
    <rect x={39.84} y={248.55} width={228.63} height={15.59} fill="#e0e0e0" />
    <rect x={39.84} y={275.39} width={266.73} height={15.59} fill="#e0e0e0" />
    <rect x={39.84} y={302.24} width={89.2} height={15.59} fill="#e0e0e0" />
    <g opacity={0.5}>
      <rect
        x={568.92}
        width={446}
        height={366.33}
        fill="url(#fdf2261c-aea2-449f-acb5-ed46fbfe76ac)"
      />
    </g>
    <rect
      x={666.98}
      y={122.35}
      width={434.74}
      height={353.34}
      transform="translate(1676.71 482.61) rotate(-180)"
      fill="#f2f2f2"
    />
    <rect
      x={666.98}
      y={122.35}
      width={434.74}
      height={78.81}
      transform="translate(1676.71 208.08) rotate(-180)"
      fill={props.primaryColor}
    />
    <rect
      x={666.98}
      y={122.35}
      width={434.74}
      height={78.81}
      transform="translate(1676.71 208.08) rotate(-180)"
      opacity={0.1}
    />
    <rect
      x={701.62}
      y={229.73}
      width={365.46}
      height={45.9}
      transform="translate(1676.71 389.95) rotate(-180)"
      fill="#e0e0e0"
    />
    <rect
      x={800.35}
      y={310.27}
      width={266.73}
      height={15.59}
      transform="translate(1775.43 520.72) rotate(-180)"
      fill="#e0e0e0"
    />
    <rect
      x={893.88}
      y={337.12}
      width={173.2}
      height={15.59}
      transform="translate(1868.96 574.41) rotate(-180)"
      fill="#e0e0e0"
    />
    <rect
      x={838.45}
      y={363.97}
      width={228.63}
      height={15.59}
      transform="translate(1813.54 628.1) rotate(-180)"
      fill="#e0e0e0"
    />
    <rect
      x={800.35}
      y={390.81}
      width={266.73}
      height={15.59}
      transform="translate(1775.43 681.79) rotate(-180)"
      fill="#e0e0e0"
    />
    <rect
      x={977.88}
      y={417.66}
      width={89.2}
      height={15.59}
      transform="translate(1952.97 735.49) rotate(-180)"
      fill="#e0e0e0"
    />
    <g opacity={0.5}>
      <rect
        x={230}
        y={159.83}
        width={556}
        height={456.68}
        fill="url(#bdb7606e-5185-43e5-b133-41bac9927d37)"
      />
    </g>
    <rect x={236.48} y={168.46} width={541.97} height={440.48} fill="#fff" />
    <rect x={236.48} y={168.46} width={541.97} height={98.24} fill={props.primaryColor} />
    <rect x={279.66} y={302.33} width={455.6} height={57.22} fill="#f5f5f5" />
    <rect x={279.66} y={402.74} width={332.52} height={19.43} fill="#e0e0e0" />
    <rect x={279.66} y={436.21} width={215.92} height={19.43} fill="#e0e0e0" />
    <rect x={279.66} y={469.67} width={285.02} height={19.43} fill="#e0e0e0" />
    <rect x={279.66} y={503.14} width={332.52} height={19.43} fill="#e0e0e0" />
    <rect x={279.66} y={536.61} width={111.2} height={19.43} fill="#e0e0e0" />
    <rect x={303.41} y={321.77} width={129.55} height={17.27} fill="#69f0ae" />
  </svg>
);

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

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

export default UndrawWindows;