TabResoursePub.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, useEffect } from 'react';
import styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Grid from '@material-ui/core/Grid';
import PublicandoRecursos from '../../img/ajuda/Publicando_recursos.png';
import Why from '../../Components/HelpCenter/TabsResoursePub/Why'
import How from '../../Components/HelpCenter/TabsResoursePub/How'
import Which from '../../Components/HelpCenter/TabsResoursePub/Which'
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';

export default function TabResoursePub(props) {

  console.log(props)

  const tabs = [
    'Por que enviar um recurso?',
    'Como publicar um recurso?',
    'Quais tipos de recursos e formatos de arquivo a plataforma aceita?',
    'Publicando Recursos'
  ]

  const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);

  const handleChangeTab = (e, newValue) => {
    setTabValue(newValue)
  }

  useEffect(() => { window.scrollTo(0, 0) }, [])

  return (
    <div style={{ backgroundColor: "#f4f4f4" }}>
      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />

      <Secao>
        <BreadCrumbsDiv>
          <StyledBreadCrumbs>
            <Link to="/" >
              Página Inicial
            </Link>
            <Link to="ajuda" >
              Ajuda
            </Link>
            <span>
              {tabs[3]}
            </span>
          </StyledBreadCrumbs>

        </BreadCrumbsDiv>
        <Grid container justify="center">
          <Grid item xs={12} md={10} >
            <Principal>
              <Menu>
                <div className="fixo">
                  <img src={PublicandoRecursos} alt="Publicando Recursos" />
                  <span>{tabs[3]}</span>
                </div>
                <TabsStyled orientation="vertical"
                  variant="scrollable"
                  value={tabValue}
                  onChange={handleChangeTab}
                  TabIndicatorProps={{ style: { display: "none" } }}
                >
                  <TabStyled label={tabs[0]}></TabStyled>
                  <TabStyled label={tabs[1]}></TabStyled>
                  <TabStyled label={tabs[2]}></TabStyled>
                </TabsStyled>
                <br />
                <div className="voltarInicio">
                  <a href="ajuda">VOLTAR AO ÍNICIO</a>
                </div>
              </Menu>

              {tabValue === 0 && <Why title={tabs[0]} />}
              {tabValue === 1 && <How title={tabs[1]} />}
              {tabValue === 2 && <Which title={tabs[2]} />}
              <div className="resultadosProcura">
                <span>Não era bem o que você procurava?</span>
                <div className="subtitulo">
                  <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
                </div>
              </div>

            </Principal>
          </Grid>
        </Grid>
        <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
          <Grid item xs={12} md={3} style={{ margin: 5 }}>
            <CardEncontrando />
          </Grid>
          <Grid item xs={12} md={3} style={{ margin: 5 }}>
            <CardParticipando />
          </Grid>
          <Grid item xs={12} md={3} style={{ margin: 5 }}>
            <CardGerenciando />
          </Grid>

        </Grid>


      </Secao>
    </div>
  );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
  display : flex;
  justify-content : flex-start;
  span {
    color : #a5a5a5;
  }
  a {
    color: #00bcd4;
    text-decoration: none;
  }

`

const BreadCrumbsDiv = styled.div`

  padding : 10px;
  display : flex;
`


const Principal = styled.div`
  .fixo {
    
    height: 40px;
    text-align: center;
    background-color: #fff;
    padding: 30px;
    margin-bottom: 30px;
    color: #666;


    img {
      height: 50px;
      width: 50px;
      margin-right: 40px;
      vertical-align: middle;

    }

    span {
      font-size: 20px;
      vertical-align: ;
    }

    

  }
  .resultadosProcura {
    text-align: center;
    margin-block: 30px;
    padding-inline: 15px;
    color: #666;
    span {
      font-size: 24px;
    }
    .subtitulo {
      margin-top: 10px;

      span {
        font-size: 15px
      }

      a {
        font-size: 15px;
        padding: 0;
        color:#00bcd4;
        text-decoration: none;
      }

    }
  }

`

const TabsStyled = styled(Tabs)`
  
  .Mui-selected {
    background-color: #e7e4e4;
  }

  .MuiTab-root{
    text-transform: none !important;
    max-width:100%
  }
  text-align: center;
  width:100%

`

const TabStyled = styled(Tab)`
    
  padding: 4px 15px !important;
  font-weight: 500;
  font-size: 14px !important;
  border-radius: 4px !important;
  text-align: center;


  


  &:hover {
    background-color: #e7e4e4;
  }
`


const Menu = styled.div`
  width: auto;
  background-color: #fff;
  color: #666;
  padding-block: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);
  margin-bottom:30px


  h4 {
    padding-inline: 15px;
    font-size: 18px;
    margin-block: 10px;
    font-weight: 500;
    line-height: 1.1;
  }

  .voltarInicio {
    padding: 4px 15px;
    font-size: 15px;
    text-align: center;
    a {
      font-size: 15px;
      padding: 0;
      color:#00bcd4;
      text-decoration: none;
    }
  }

  hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .procurava {
    padding: 4px 15px;
    font-size: 15px;
    text-align: center;

    a {
      font-size: 15px;
      padding: 0;
      color:#00bcd4;
      text-decoration: none;
    }

  }

`

const Secao = styled.div`
  margin-inline: auto;

`