diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index bbd12897bf3de1689c3f32f1ae4b7048e81defb6..074fd927a6a295f87908e5fb8304b152fff42655 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -29,14 +29,17 @@ import { Carousel } from 'react-responsive-carousel';
import recursos from "../img/ilustra_recursos_digitais.png";
import materiais from "../img/ilustra_materiais.png";
import colecoes from "../img/ilustra_colecoes.png";
+import Grid from '@material-ui/core/Grid';
+
const areaStyle={
paddingTop: "5px",
fontSize: "16px",
textAlign:"left",
backgroundColor: "inherit",
- width: "700px",
+ width: "1000px",
+ margin: "auto",
padding: "20px",
- minHeight: "150px"
+ minHeight: "190px"
}
class ReqResources extends Component{
@@ -156,11 +159,19 @@ class SubPages extends Component{
<React.Fragment>
<div style={{backgroundColor: "#ff7f00"}}>
<Container style={areaStyle}>
- <img src={recursos} alt="aba recursos" height="100" style={{float: "left"}}/>
- <p>Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é,
- a vÃdeos, animações e a outros recursos destinados à educação. São Recursos
- de portais parceiros do MEC e de professores que, como você, atuam na
- Educação Básica!</p>
+ <Grid container style={{display:"flex"}} spacing={5}>
+ <Grid item xs={3} >
+ <img src={recursos} alt="aba recursos" height="155" style={{float: "right"}}/>
+ </Grid>
+ <Grid item xs={9}>
+ <p style={{textAlign: "justify", color:"#fff"}}>
+ Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é,
+ a vÃdeos, animações e a outros recursos destinados à educação. São Recursos
+ de portais parceiros do MEC e de professores que, como você, atuam na
+ Educação Básica!
+ </p>
+ </Grid>
+ </Grid>
</Container>
</div>
<Container style={{padding:"20px"}}>
@@ -180,7 +191,8 @@ class SubPages extends Component{
<React.Fragment>
<div style={{backgroundColor: "#e81f4f"}}>
<Container style={areaStyle}>
- <img src={materiais} alt="aba materiais" height="100" style={{float: "left"}}/>
+
+ <img src={materiais} alt="aba materiais" height="165" style={{float: "right"}}/>
<p>Nesta área, você acessa livremente materiais completos de formação,
como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos
elaborados por equipes multidisciplinares e de autoria de pesquisadores
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf9de2678a7ee4f5a7b40d5a938f1660178cdae5
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -0,0 +1,95 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPCompCurriculum() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosComponente = [
+ { exemplo: "Arte", value: "0" },
+ { exemplo: "Biologia", value: "1" },
+ { exemplo: "Ciências da Natureza", value: "2" },
+ { exemplo: "Direitos Humanos", value: "3" },
+ { exemplo: "Educação Ambiental", value: "4" },
+ { exemplo: "Educação do Campo", value: "5" },
+ { exemplo: "Educação Especial", value: "6" },
+ { exemplo: "Educação FÃsica", value: "7" },
+ { exemplo: "Educação IndÃgena", value: "8" },
+ { exemplo: "Educação Quilombola", value: "9" },
+ { exemplo: "Educação Sexual", value: "10" },
+ { exemplo: "Ensino Religioso", value: "11" },
+ { exemplo: "Filosofia", value: "12" },
+ { exemplo: "FÃsica", value: "13" },
+ { exemplo: "Geografia", value: "14" },
+ { exemplo: "História", value: "15" },
+ { exemplo: "Informática", value: "16" },
+ { exemplo: "LÃngua Espanhola", value: "17" },
+ { exemplo: "LÃngua Inglesa", value: "18" },
+ { exemplo: "LÃngua Portuguesa", value: "19" },
+ { exemplo: "Matemática", value: "20" },
+ { exemplo: "Outras LÃnguas", value: "21" },
+ { exemplo: "Outros", value: "22" },
+ { exemplo: "QuÃmica", value: "23" },
+ { exemplo: "Sociologia", value: "24" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosComponente.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b29aef845f505aa16f3fd744aa2fc34f984d2c8
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -0,0 +1,82 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPIdiomas() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosIdiomas = [
+ { value: "0", exemplo: "Alemão" },
+ { value: "1", exemplo: "Espanhol" },
+ { value: "2", exemplo: "Francês" },
+ { value: "3", exemplo: "Inglês" },
+ { value: "4", exemplo: "Italiano" },
+ { value: "5", exemplo: "Japonês" },
+ { value: "6", exemplo: "LIBRAS" },
+ { value: "7", exemplo: "Mandarim" },
+ { value: "8", exemplo: "Nenhum" },
+ { value: "9", exemplo: "Outro" },
+ { value: "10", exemplo: "Português" },
+ { value: "11", exemplo: "Russo" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosIdiomas.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchEPKeyWord.js b/src/Components/SearchExpansionPanel/SearchEPKeyWord.js
new file mode 100644
index 0000000000000000000000000000000000000000..101a0e0609fe318817ab8b76b5d964daef1deba8
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPKeyWord.js
@@ -0,0 +1,167 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import SearchList from "../SearchList";
+
+const ExpansionPanel = withStyles({
+ root: {
+ border: "1px solid rgba(0, 0, 0, .125)",
+ boxShadow: "none",
+ "&:not(:last-child)": {
+ borderBottom: 0
+ },
+ "&:before": {
+ display: "none"
+ },
+ "&$expanded": {
+ margin: "auto"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+ root: {
+ color: "#666",
+ marginBottom: -1,
+ minHeight: 56,
+ backgroundColor: "#fff",
+
+ "&$expanded": {
+ minHeight: 56,
+ backgroundColor: "#fff"
+ }
+ },
+ content: {
+ "&$expanded": {
+ margin: "12px 0"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanelSummary);
+
+const TesteTypography = withStyles({
+ root: {
+ fontSize: "17px"
+ }
+})(Typography);
+
+const ExpansionPanelDetails = withStyles(theme => ({
+ root: {
+ padding: theme.spacing(2)
+ }
+}))(MuiExpansionPanelDetails);
+
+export default function SearchExpansionPanels() {
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
+ rel="stylesheet"
+ />
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel1d-content"
+ id="panel1d-header"
+ >
+ <Typography
+ style={{
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500"
+ }}
+ >
+ Filtros
+ </Typography>
+ </ExpansionPanelSummary>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel2d-content"
+ id="panel2d-header"
+ >
+ <TesteTypography>Componentes Curriculares</TesteTypography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ <SearchList />
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel3d-content"
+ id="panel3d-header"
+ >
+ <Typography>Tipos de Recurso</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel4d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel4d-header"
+ >
+ <Typography>Etapas de Ensino</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel5d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel5d-header"
+ >
+ <Typography>Idiomas</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel6d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel6d-header"
+ >
+ <Typography>Palavra-Chave</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </div>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
new file mode 100644
index 0000000000000000000000000000000000000000..063fa12613e037f85b8172d45b954594ba9dcdcd
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -0,0 +1,85 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPTiposRec() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosTipos = [
+ { value: "0", exemplo: "Animação" },
+ { value: "1", exemplo: "Aplicativo móvel" },
+ { value: "2", exemplo: "Apresentação" },
+ { value: "3", exemplo: "Ãudio" },
+ { value: "4", exemplo: "Experimento prático" },
+ { value: "5", exemplo: "Imagem" },
+ { value: "6", exemplo: "Infográfico" },
+ { value: "7", exemplo: "Jogo" },
+ { value: "8", exemplo: "Livro digital" },
+ { value: "9", exemplo: "Mapa" },
+ { value: "10", exemplo: "Outros" },
+ { value: "11", exemplo: "Software Educacional" },
+ { value: "12", exemplo: "Texto" },
+ { value: "13", exemplo: "VÃdeo" },
+ { value: "14", exemplo: "Website externo" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosTipos.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..b72a0bf4868698c08dd85dbf3097d5954ea52abc
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -0,0 +1,157 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
+import SearchEPTiposRec from "./SearchEPTiposRec";
+import SearchEPEtapasEns from "./SesrchEPEtapasEns";
+import SearchEPIdiomas from "./SearchEPIdiomas";
+const ExpansionPanel = withStyles({
+ root: {
+ border: "1px solid rgba(0, 0, 0, .125)",
+ boxShadow: "none",
+ "&:not(:last-child)": {
+ borderBottom: 0
+ },
+ "&:before": {
+ display: "none"
+ },
+ "&$expanded": {
+ margin: "auto"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+ root: {
+ color: "#666",
+ marginBottom: -1,
+ minHeight: 56,
+ backgroundColor: "#fff",
+ ".MuiButtonBase-root.MuiIconButton-root.MuiExpansionPanelSummary-expandIcon.MuiIconButton-edgeEnd": {
+ paddingInline: "0"
+ },
+
+ "&$expanded": {
+ minHeight: 56,
+ backgroundColor: "#fff"
+ }
+ },
+ content: {
+ "&$expanded": {
+ margin: "12px 0"
+ }
+ },
+ expanded: {}
+})(MuiExpansionPanelSummary);
+
+const TesteTypography = withStyles({
+ root: {
+ fontSize: "17px"
+ }
+})(Typography);
+
+const ExpansionPanelDetails = withStyles(theme => ({
+ root: {
+ padding: theme.spacing(2)
+ }
+}))(MuiExpansionPanelDetails);
+
+export default function SearchExpansionPanel() {
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
+ rel="stylesheet"
+ />
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel1d-content"
+ id="panel1d-header"
+ >
+ <Typography
+ style={{
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500"
+ }}
+ >
+ Filtros
+ </Typography>
+ </ExpansionPanelSummary>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel2d-content"
+ id="panel2d-header"
+ >
+ <TesteTypography>Componentes Curriculares</TesteTypography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ <SearchEPCompCurriculum />
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel3d-content"
+ id="panel3d-header"
+ >
+ <Typography>Tipos de Recurso</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPTiposRec />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel4d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel4d-header"
+ >
+ <Typography>Etapas de Ensino</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPEtapasEns />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel5d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel5d-header"
+ >
+ <Typography>Idiomas</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPIdiomas />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel6d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel6d-header"
+ >
+ <Typography>Palavra-Chave</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+ malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+ lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </div>
+ );
+}
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
new file mode 100644
index 0000000000000000000000000000000000000000..db71afa999203424d152a76cd37e2df7e6fc7515
--- /dev/null
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -0,0 +1,76 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
+
+export default function SearchEPEtapasEns() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+ const filtrosEtapas = [
+ { value: "0", exemplo: "Educação Infantil" },
+ { value: "1", exemplo: "Ensino Fundamental I (1º até o 5º ano )" },
+ { value: "2", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)" },
+ { value: "3", exemplo: "Ensino Médio" },
+ { value: "4", exemplo: "Ensino Superior" },
+ { value: "5", exemplo: "Outros" }
+ ];
+
+ return (
+ <List className={classes.root}>
+ {filtrosEtapas.map(item => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
+ key={item.exemplo}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(item.value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(item.value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}
diff --git a/src/Components/SearchList.js b/src/Components/SearchList.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f789ce11cbfdb21bb5a37df2379aff6d109e1b8
--- /dev/null
+++ b/src/Components/SearchList.js
@@ -0,0 +1,70 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import CommentIcon from "@material-ui/icons/Comment";
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper
+ }
+}));
+
+export default function SearchList() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState([0]);
+
+ const handleToggle = value => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+
+ return (
+ <List className={classes.root}>
+ {[0, 1, 2, 3].map(value => {
+ const labelId = `checkbox-list-label-${value}`;
+
+ return (
+ <ListItem
+ key={value}
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(value)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={checked.indexOf(value) !== -1}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments">
+ <CommentIcon />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
+}