/*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 EncontrandoRecurso from '../../img/ajuda/Encontrando_recursos.png'; import HowToDo from '../../Components/HelpCenter/TabsResourseFind/HowToDo' import HowToRank from '../../Components/HelpCenter/TabsResourseFind/HowToRank' import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilter'; import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; import { Link } from 'react-router-dom'; export default function TabResourseFind(props) { const tabs = [ 'Como fazer uma busca?', 'Como filtrar os resultados?', 'Como os recursos são ranqueados?', 'Encontrando 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={EncontrandoRecurso} alt="Encontrando 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 && <HowToDo title={tabs[0]} />} {tabValue === 1 && <HowToFilter title={tabs[1]} />} {tabValue === 2 && <HowToRank 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 }}> <CardPublicando /> </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; `