import React from "react";
//import "../Componets/style.css";
const title = { name: "Имя", discription: "Описание", homepage: "Сайт" };
import "./style.css";
class PageOverlays extends React.Component {
  VVSB = false;
  viewSideBar() {
    if (!this.VVSB) {
      document.getElementById("MainContent").style.paddingLeft = "300px";
      document.getElementById("btn-toggle").style.float = "righ";
      document.getElementById("navBar").style.left = "0px";
      this.VVSB = true;
    } else {
      document.getElementById("MainContent").style.paddingLeft = "0px";
      document.getElementById("navBar").style.left = "-280px";
      this.VVSB = false;
    }
  }

  render() {
    return (
      <div>
        <h2>Оверлеи</h2>
        <hr />
        <ul style={{ listStyle: "none" }}>
          {this.props.repositores.map((over, i) => (
            <div
              className="flex_tab  "
              key={i}
              style={{
                padding: "5px",
                fontSize: "1.2em",
                textAlign: "left",
                width: "80vw"
              }}
            >
              <li
                style={{
                  border: "1px dotted #AAA",
                  boxShadow: "3px 4px 10px #CDC",
                  borderRadius: "0px"
                }}
              >
                <h3 style={{ textAlign: "center" }}>
                  <b>{over.name}</b>{" "}
                </h3>

                <span>{title.discription}:</span>
                <b style={{}}> {over.description} </b>

                <div
                  className=" btn-group"
                  style={{
                    display: "flex",
                    margin: "10px",
                    float: "right"
                  }}
                >
                  <div classname="btn" style={{}}>
                    <a
                      style={{
                        background: "orange",
                        color: "#FFF",
                        textDecoration: "none",
                        padding: "10px"
                      }}
                      href={over.homepage}
                    >
                      {" "}
                      {title.homepage}
                    </a>
                  </div>
                  <div className="btn ">
                    <span>Добавить</span>
                  </div>
                </div>
              </li>
            </div>
          ))}
        </ul>
      </div>
    );
  }
}
export default PageOverlays;