text: import * as React from "react"
  
  //Components
  import Card from "../Card"
  // import ProjectDlayer from "./ProjectDlayer"
  import LoadingProjectCards from "../LoadingProjectCards"
  import ProjectWebsite from "./ProjectWebsite"
  import ProjectDlayer from "./ProjectDlayer"
  
  class Projects extends React.Component {
    constructor(props) {
      super(props)
      this.state = { projects: null }
    }
  
    componentDidMount() {
      this.props.db.getProjects()
        .then(res => {
          this.setState({ projects: res.Projects })
        })
    }
  
    render() {
      if (this.state.projects === null) {
        return (
          <>
            <div className={"Projects"}>
              <div className={"Cards"}>
                <LoadingProjectCards />
              </div>
            </div>
  
          </>
        )
  
      } else {
        return (
          <>
            <div className={"Projects"}>
              <div className={"Cards"}>
                {this.state.projects.map((post, index) => (
                  <Card
                    id={"ProjectCard" + index}
                    key={"ProjectCard" + index}
                    image={post.image}
                    title={post.title}
                    subtitle={post.subtitle}
                  />
                ))}
              </div>
            </div>
            <div id={"ProjectInfo"} className={"ProjectInfo"}>
              <ProjectWebsite className={"hide"} />
              <ProjectDlayer className={"hide"} />
            </div>
          </>
        )
      }
  
    }
  }
  
  export default Projects
  