SearchSectionFunction.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, {useState} from 'react';
import '../App.css';
import styled from 'styled-components'
// 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"
import {Link} from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
import HomeScreenSearchBar from './HomeScreenSearchBar'

//Image Import
import { banner } from "ImportImages.js";
import { bannerMobile } from "ImportImages.js";

export default function SearchSection (props) {
    const [modalOpen, handleModal] = useState(false)
    const toggleModal = () => {handleModal(!modalOpen)}

    const WIDTH = window.innerWidth;
    return (
        <React.Fragment>
        <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal}/>
        <Banner>
            <StyledGrid container direction="row" justify="center">
                <Grid item style={{paddingRight : "15px", paddingLeft : "15px", paddingBottom : "120px"}}>
                    <div className="title">
                        <h2>
                            Plataforma MEC de Recursos Educacionais Digitais
                        </h2>
                        <h3>
                            Encontre e compartilhe vídeos, animações e muitos outros Recursos
                        </h3>
                    </div>
                    <HomeScreenSearchBar/>
                    <div className="links">
                        <Link to="/sobre">
                            <MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
                            {WIDTH <= 501 ? ("SOBRE") : ("SOBRE A PLATAFORMA")}
                        </Link>
                        <span onClick={toggleModal} style={{cursor : "pointer"}}>
                            <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
                                {WIDTH <= 501 ? ("VÍDEO") : ("VÍDEO DE APRESENTAÇÃO")}
                        </span>
                    </div>
                </Grid>
            </StyledGrid>
            {
                WIDTH > 501 &&
                <Row justify="center" style={{marginLeft:0, marginRight:0}}>
                    <button className="recurso"
                        onClick={() => {props.function("Recursos")}}>
                        Recursos Educacionais Digitais
                    </button>

                    <button className="material-formacao"
                        onClick={() => {props.function("Materiais")}}>
                        Materiais de Formação
                    </button>

                    <button className="colecao"
                        onClick={() => {props.function("Colecoes")}}>
                        Coleções dos Usuários
                    </button>
                </Row>
            }
        </Banner>
    </React.Fragment>
    )
}

const StyledGrid = styled(Grid)`
    margin-right : auto !important;
    margin-left auto !important;
    color : #fff !important;
    text-align : center !important;
`

const Banner = styled.div`
    width : 100%;
    @media screen and (max-width : 501px) {
        background-image : url(${bannerMobile});
    }
    @media screen and (min-width : 502px) {
        background-image : url(${banner});
    }
    background-size : cover;
    text-align : center;

    .title {
        color : white;
        padding-top : 80px;
        font-size : 22px;

        h2 {
            margin-top : 0 !important;
            margin-bottom : 10px !important;
        }

        h3 {
            font-weight : 100;
            font-size : 24px;
            margin : 0 !important;
        }
    }

    .links {
        margin-top : 20px;
        color : white;
        display : flex;
        justify-content : space-around;

        a {
            color : #fff;
            text-decoration : none !important;
            outline : none;
            padding-right : 10px;
        }
    }

    button {
        align-items: flex-start;
        font-size: 1.14em;
        text-align: center;
        cursor: pointer;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        line-height: 1.42857143;
        width: 25%;
        margin-top: 1%;
        color: white;
        padding: 1.2%;
        border-width: 5%;
        border-style: none;
        border-image: initial;
        outline : none;
    }

    .recurso {
        background-color : #ff7f00;
    }
    .material-formacao {
        background-color : #e81f4f;
    }
    .colecao {
        background-color : #673ab7;
    }
`