{"size": 1865, "ext": "js", "max_stars_repo_path": "src/components/Pipe.js", "max_stars_repo_name": "olivertembo/Zambezi-Properties-Components", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Pipe.js", "max_issues_repo_name": "olivertembo/Zambezi-Properties-Components", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Pipe.js", "max_forks_repo_name": "olivertembo/Zambezi-Properties-Components", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 19.8404255319, "max_line_length": 66, "alphanum_fraction": 0.4986595174}
import React from "react";
import PropTypes from "prop-types";

export default function Pipe({ heightTop, heightBottom, color }) {
  return (
    <div>
      <svg
        className="pipe__svg"
        style={{
          ...styles.pipeSvg,
          height: heightTop + heightBottom,
        }}
      >
        <path
          d="M0, 0 100,100"
          style={{
            ...styles.pipeSvgPath,
            stroke: color,
          }}
        />
      </svg>
      <div style={styles.pipe} className="pipe">
        Title herev] changed
        <div
          className="pipe__top"
          style={{
            ...styles.pipeTop,
            height: heightTop,
            background: color,
          }}
        ></div>
        <div
          className="pipe__bottom"
          style={{
            ...styles.pipeBottom,
            height: heightBottom,
            background: color,
          }}
        ></div>
      </div>
    </div>
  );
}

const styles = {
  pipeSvg: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    zIndex: -1,
  },
  pipe: {
    position: "absolute",
    width: "50px",
    height: "500px",
    background: "red",
    left: "50%",
    marginLeft: "-25px",
    top: "0",
    bottom: "0",
    transform: "rotate(90deg)",
    borderRadius: "10px",
    zIndex: "1",
  },
  pipeSvgPath: {
    strokeWidth: "2px",
    stroke: "black",
  },
  pipeTop: {
    position: "absolute",
    width: "100%",
    height: "100%",
    background: "red",
    borderRadius: "10px",
    zIndex: "1",
  },
  pipeBottom: {
    position: "absolute",
    width: "100%",
    height: "100%",
    background: "red",
    borderRadius: "10px",
    zIndex: "1",
  },
};

Pipe.propTypes = {
  heightTop: PropTypes.number.isRequired,
  heightBottom: PropTypes.number.isRequired,
  color: PropTypes.string.isRequired,
};
