SearchSection.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, {Component} from 'react';
import '../App.css';
import banner from '../img/bannerBusca.jpg';
// import SearchBar from './SearchBar';
import {Row} from 'react-grid-system';
import {MdInfoOutline} from "react-icons/md"
import { FaRegPlayCircle} from "react-icons/fa";
import ModalVideoApresentacao from "./ModalVideoApresentacao.js"

const bannerStyle = {
    width: "100%",
    backgroundImage: `url(${banner})`,
    backgroundSize: "cover",
    textAlign: "center"
}
const titleStyle = {
    color: "white",
    paddingTop: "5%",
}
const buttonStyle = {
    alignItems: "flex-start",
    fontSize: "0.7em",
    textAlign: "center",
    cursor: "pointer",
    borderTopLeftRadius: "15px",
    borderTopRightRadius: "15px",
    lineHeight: 1.42857143,
    width: "20%",
    marginTop: "1%",
    color: "white",
    padding: "1.2%",
    borderWidth: "5%",
    borderStyle: "none",
    borderImage: "initial"
}

class SearchSection extends Component{
  constructor(props){
    super(props);
    this.state={
      color: "#ff7f00",
      modalOpen : false
    };}

    toggleModal = () => {
        this.setState({modalOpen : !this.state.modalOpen})
    }

  render(){
    return(
    <React.Fragment>
    <ModalVideoApresentacao open={this.state.modalOpen} handleClose={this.toggleModal}/>
    <div style={bannerStyle}>
      <div style={titleStyle}>
        <h2 style={{color : "white"}}>Plataforma MEC de Recursos Educacionais Digitais</h2>
        <h3 style={{fontWeight: "100", color: "white"}}>
          Encontre e compartilhe vídeos, animações e muitos outros Recursos
        </h3>
      </div>
      {/* <Container style={{backgroundColor: "white" ,width: "50%" ,float: "center", alignItems: "center", borderRadius: "5px", color: this.state.color}}>
          <SearchBar/>
      </Container> */}
          <div style={{paddingBottom: "100px", color: "white"}}>
            <a href="sobre" style={{color:"#fff",textDecoration: "none", outline:"none", paddingRight : "10px"}}><MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}} />SOBRE A PLATAFORMA</a>
            <span onClick={this.toggleModal} style={{cursor : "pointer"}}>
            <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>VÍDEO DE APRESENTAÇÃO
            </span>
          </div>
      <Row justify="center" style={{marginLeft:0, marginRight:0}}>
      <button style={{...buttonStyle, ...{backgroundColor: "#ff7f00",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button>
      <button style={{...buttonStyle, ...{backgroundColor: "#e81f4f",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Materiais")}}>Materiais de Formação</button>
      <button style={{...buttonStyle, ...{backgroundColor: "#673ab7",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button>
      </Row>
    </div>
    </React.Fragment>
  );
  }
}

export default SearchSection;