webport/client/webport(1)/src/pages/main.js

import React from "react";
import ReactDOM from "react-dom";
import Scard from "../Componets/Cards/smallCard";
import FullCard from "../Componets/Cards/fullCard";
//import NavBar from "../Componets/NavList/navList";
import "./style.css";

export default class MainPage extends React.Component {
  i = {
    name: "Имя",
    category: "Категория:",
    versions: " версии:Доступные",
    uses: " USE:",
    decription: "Описание:",
    site: "Сайт:",
    button: {
      text: "Установить"
    }
  };

  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;
    }
  }
  viweinfo(pkg) {
    //onClick={() => this.props.ViewPackageInfo(this.props.rec[k][i])}
    ReactDOM.render(
      <FullCard
        PackageName={pkg}
        PropMain={this.props.rec}
        icons={this.props.icons}
      />,
      document.getElementById("HomePage")
    );
  }

  render() {
    return (
      <div id="HomePage">
        {Object.keys(this.props.rec).map((k) => (
          <div
            style={{
              paddingRight: "0px",
              width: "100%",
              overflow: "clip"
            }}
          >
            <p>
              {" "}
              <b stye={{ fontSize: "1.3em" }}>{k.split("[")[1]}</b>
            </p>
            {this.props.rec[k].map((pn, i) => (
              <div
                style={{
                  padding: "5px",
                  //width: "100vw",
                  borderBottom: "1px solid #CCC",
                  borderRadius: "0px 0px 0px 20px"
                }}
                onClick={() => this.viweinfo(this.props.rec[k][i])}
              >
                <img
                  style={{
                    width: "64px",
                    height: "64px"
                  }}
                  src={this.props.icons[pn.Name.split("/")[1]]}
                />
                <div style={{}}>
                  <span
                    style={{
                      color: "red",
                      width: "100%",
                      overflow: "clip",
                      fontSize: "1.2em"
                    }}
                    key={pn.Name}
                  >
                    {pn.Name.split("/")[1]}
                  </span>
                  <div>{pn.Description}</div>
                </div>
              </div>
            ))}
          </div>
        ))}
        <div
          id="info"
          style={{
            position: "fixed",
            top: "0px",
            left: this.posiLetf,
            width: "100%",
            height: "100%",
            background: "#2e323f",
            display: "none"
          }}
        ></div>
      </div>
    );
  }
}