diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 9d244903799c32031745a3a888d06f3874056ea9..8670178587cacf74b98445342206d7a2a7b04f95 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -42,506 +42,511 @@ import { ColecaoVazia } from "ImportImages.js";
import { RecursoVazio } from "ImportImages.js";
function objectsPerPage() {
- var pageWidth = window.innerWidth
- if (pageWidth >= 1200) {
- return 3
- }
- else {
- if (pageWidth > 766) {
- return 2
+ var pageWidth = window.innerWidth
+ if (pageWidth >= 1200) {
+ return 3
}
else {
- return 1
+ if (pageWidth > 766) {
+ return 2
+ }
+ else {
+ return 1
+ }
}
- }
}
function ReqResources(props) {
- const [rows, setRows] = useState([])
- const [isLoading, setIsLoading] = useState(false)
-
- function onSuccessfulGet(data) {
- var aux = []
- var resources_per_page = objectsPerPage()
- for (let i = 0; i < 12 / resources_per_page; i++) {
- aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ const [rows, setRows] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+
+ function onSuccessfulGet(data) {
+ var aux = []
+ var resources_per_page = objectsPerPage()
+ for (let i = 0; i < 12 / resources_per_page; i++) {
+ aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ }
+ setRows(aux)
+ setIsLoading(false)
}
- setRows(aux)
- setIsLoading(false)
- }
- useEffect(() => {
- setIsLoading(true)
- const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=LearningObject`
+ useEffect(() => {
+ setIsLoading(true)
+ const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=LearningObject`
- getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
- }, [props.order])
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+ }, [props.order])
- return (
- isLoading ?
- <Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
- <Grid item>
- <CircularProgress size={24} color="#ff7f00" />
- </Grid>
- </Grid>
- :
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- {
- rows.length >= 1 ?
- rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </div>
- ))}
- </Row>
- ))
- :
- <Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={RecursoVazio} alt="Não há recursos" />
- </Grid>
+ return (
+ isLoading ?
+ <Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
+ <Grid item>
+ <CircularProgress size={24} color="#ff7f00" />
</Grid>
- }
- </Carousel>
+ </Grid>
+ :
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ {
+ rows.length >= 1 ?
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <ResourceCardFunction
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
+ ))
+ :
+ <Grid container justify="center" alignItems="center">
+ <Grid item>
+ <img src={RecursoVazio} alt="Não há recursos" />
+ </Grid>
+ </Grid>
+ }
+ </Carousel>
- )
+ )
}
function ReqCollections(props) {
- const [rows, setRows] = useState([])
- const [isLoading, setIsLoading] = useState(false)
-
- function onSuccessfulGet(data) {
- var aux = []
- var collections_per_page = objectsPerPage()
- for (let i = 0; i < 12 / collections_per_page; i++) {
- aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ const [rows, setRows] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+
+ function onSuccessfulGet(data) {
+ var aux = []
+ var collections_per_page = objectsPerPage()
+ for (let i = 0; i < 12 / collections_per_page; i++) {
+ aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ }
+ setIsLoading(false)
+ setRows(aux)
}
- setIsLoading(false)
- setRows(aux)
- }
- useEffect(() => {
- setIsLoading(true)
- const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=Collection`
+ useEffect(() => {
+ setIsLoading(true)
+ const url = `/search?page=0&results_per_page=12&order=${props.order}&query=*&search_class=Collection`
- getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
- }, [props.order])
+ getRequest(url, (data) => onSuccessfulGet(data), (error) => { console.log(error) })
+ }, [props.order])
- return (
- isLoading ?
- <Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
+ return (
+ isLoading ?
+ <Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
<Grid item>
- <CircularProgress size={24} color="#673ab7" />
+ <CircularProgress size={24} color="#673ab7" />
</Grid>
- </Grid>
- :
- rows.length >= 1 ?
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- {
- rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.score}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner ? card.owner.id : ""}
- />
- </div>
+ </Grid>
+ :
+ rows.length >= 1 ?
+ <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ {
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner ? card.owner.id : ""}
+ />
+ </div>
+ ))}
+ </Row>
))}
- </Row>
- ))}
- </Carousel>
+ </Carousel>
:
- <Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={ColecaoVazia} alt="Não há coleções" />
- </Grid>
- </Grid>
- )
+ <Grid container justify="center" alignItems="center">
+ <Grid item>
+ <img src={ColecaoVazia} alt="Não há coleções" />
+ </Grid>
+ </Grid>
+ )
+}
+
+function ReqMaterials(props) {
+ const materials = colecoes_obj();
+
+ const handleExpandMaterial = (id) => {
+ if (id !== props.currMaterial.material.id)
+ props.setCurrMaterial({
+ open: true,
+ material: { ...materials[id] }
+ })
+ else
+ props.setCurrMaterial({
+ open: false,
+ material: {}
+ })
+ }
+
+ return (
+ <Row>
+ {
+ materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={handleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ )
+ })
+ }
+ </Row>
+ )
}
function TabRecurso() {
- const text = "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!"
- const [currOrder, setCurrOrder] = useState("Mais Relevante");
- const [currValue, setCurrValue] = useState("score");
- const [ordenar] = useState([
- { label: "Mais Estrelas", value: "review_average" },
- { label: "Mais Relevante", value: "score" },
- { label: "Mais Baixados", value: "downloads" },
- { label: "Mais Favoritados", value: "likes" },
- { label: "Mais Recentes", value: "publicationdesc" },
- { label: "Ordem Alfabética", value: "title" },
- ]);
-
- return (
- <React.Fragment>
- <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
- <StyledTab container>
- <Grid item md={3} xs={12}>
- <img
- src={recursos}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Recursos Educacionais Digitais
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: "1px solid #ff7f00",
- color: "#ff7f00",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
- {
- `Recursos ${currOrder}`
- }
- </p>
+ const text = "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!"
+ const [currOrder, setCurrOrder] = useState("Mais Relevante");
+ const [currValue, setCurrValue] = useState("score");
+ const [ordenar] = useState([
+ { label: "Mais Estrelas", value: "review_average" },
+ { label: "Mais Relevante", value: "score" },
+ { label: "Mais Baixados", value: "downloads" },
+ { label: "Mais Favoritados", value: "likes" },
+ { label: "Mais Recentes", value: "publicationdesc" },
+ { label: "Ordem Alfabética", value: "title" },
+ ]);
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
</Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Recursos Educacionais Digitais
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #ff7f00",
+ color: "#ff7f00",
+ }}
+ >
<Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
+ {
+ `Recursos ${currOrder}`
+ }
+ </p>
</Grid>
+
<Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- >
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
- >
- <span style={currValue === option.value ? { color: "#ff7f00" } : null} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <TextField
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ >
+ {ordenar.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: "#ff7f00" } : null} >
+ {option.label}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
</Grid>
- </Grid>
</Grid>
- </Grid>
- <Hidden sm xs>
- <ReqResources order={currValue} />
- </Hidden>
- <Visible sm xs>
- <ReqResources order={currValue} />
- </Visible>
- </Container>
- }
- </React.Fragment>
- )
+ <Hidden sm xs>
+ <ReqResources order={currValue} />
+ </Hidden>
+ <Visible sm xs>
+ <ReqResources order={currValue} />
+ </Visible>
+ </Container>
+ }
+ </React.Fragment>
+ )
}
function TabColecoes() {
- const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
- const [currOrder, setCurrOrder] = useState("Mais Relevante");
- const [currValue, setCurrValue] = useState("score");
- const [ordenar] = useState([
- { label: "Mais Estrelas", value: "review_average" },
- { label: "Mais Relevante", value: "score" },
- { label: "Mais Baixados", value: "downloads" },
- { label: "Mais Favoritados", value: "likes" },
- { label: "Mais Recentes", value: "publicationdesc" },
- { label: "Ordem Alfabética", value: "title" },
- ]);
-
- return (
- <React.Fragment>
- <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
- <StyledTab container>
- <Grid item md={3} xs={12}>
- <img
- src={colecoes}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Coleções dos Usuários
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: "1px solid #673ab7",
- color: "#673ab7",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
- {
- `Coleções ${currOrder}`
- }
- </p>
+ const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
+ const [currOrder, setCurrOrder] = useState("Mais Relevante");
+ const [currValue, setCurrValue] = useState("score");
+ const [ordenar] = useState([
+ { label: "Mais Estrelas", value: "review_average" },
+ { label: "Mais Relevante", value: "score" },
+ { label: "Mais Baixados", value: "downloads" },
+ { label: "Mais Favoritados", value: "likes" },
+ { label: "Mais Recentes", value: "publicationdesc" },
+ { label: "Ordem Alfabética", value: "title" },
+ ]);
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={colecoes}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
</Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Coleções dos Usuários
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #673ab7",
+ color: "#673ab7",
+ }}
+ >
<Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
+ {
+ `Coleções ${currOrder}`
+ }
+ </p>
</Grid>
+
<Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- >
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
- >
- <span style={currValue === option.value ? { color: "#673ab7" } : null} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <TextField
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ >
+ {ordenar.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: "#673ab7" } : null} >
+ {option.label}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
</Grid>
- </Grid>
</Grid>
- </Grid>
- <ReqCollections order={currValue} />
- </Container>
- }
- </React.Fragment>
- )
+ <ReqCollections order={currValue} />
+ </Container>
+ }
+ </React.Fragment>
+ )
}
function TabMateriais() {
- const text = "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 e educadores renomados nas áreas."
-
- const materials = colecoes_obj()
-
- const [currMaterial, setCurrMaterial] = useState({
- open: false,
- material: {}
- })
+ const text = "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 e educadores renomados nas áreas."
- const handleExpandMaterial = (id) => {
- if (id !== currMaterial.material.id)
- setCurrMaterial({
- open: true,
- material: { ...materials[id] }
- })
- else {
- setCurrMaterial({
+ const [currMaterial, setCurrMaterial] = useState({
open: false,
material: {}
- })
- }
- }
-
- return (
- <React.Fragment>
- <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
- <StyledTab container>
- <Grid item md={3} xs={12}>
- <img
- src={materiais}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Materiais de formação
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+ })
+
+ return (
+ <React.Fragment>
+ <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={materiais}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Materiais de formação
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+ </div>
+ }
+ </StyledTab>
</div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <Container style={{ padding: "20px" }}>
- <p
- style={{
- paddingBottom: "5px",
- borderBottom: "1px solid #e81f4f",
- color: "#e81f4f",
- }}
- >
- Materiais mais recentes{" "}
- </p>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- infiniteLoop={true}
- showStatus={false}
- >
- <Row>
- {
- materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={handleExpandMaterial}
- id={index}
- />
- </Col>
- )
- })
- }
- </Row>
- </Carousel>
- {
- currMaterial.open ?
- <ExpandedMaterial material={currMaterial.material} />
- :
- null
- }
- </Container>
- }
+ {
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #e81f4f",
+ color: "#e81f4f",
+ }}
+ >
+ Materiais mais recentes{" "}
+ </p>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ infiniteLoop={true}
+ showStatus={false}
+ >
+ <ReqMaterials currMaterial={currMaterial} setCurrMaterial={setCurrMaterial} />
+ </Carousel>
+ {
+ currMaterial.open ?
+ <ExpandedMaterial material={currMaterial.material} />
+ :
+ null
+ }
+ </Container>
+ }
</React.Fragment >
)
}
export default function AreasSubPages(props) {
- const areaRender = () => {
- switch (props.banner) {
- case "Recursos":
- return <TabRecurso />
- case "Materiais":
- return <TabMateriais />
- case "Colecoes":
- return <TabColecoes />
- default:
- return null
+ const areaRender = () => {
+ switch (props.banner) {
+ case "Recursos":
+ return <TabRecurso />
+ case "Materiais":
+ return <TabMateriais />
+ case "Colecoes":
+ return <TabColecoes />
+ default:
+ return null
+ }
}
- }
-
- return (
- <React.Fragment>
- {
- window.innerWidth <= 501 ? (
- <React.Fragment>
- <TabRecurso />
- <TabMateriais />
- <TabColecoes />
- </React.Fragment>
- ) : (
- areaRender()
- )
- }
- </React.Fragment>
- )
+
+ return (
+ <React.Fragment>
+ {
+ window.innerWidth <= 501 ? (
+ <React.Fragment>
+ <TabRecurso />
+ <TabMateriais />
+ <TabColecoes />
+ </React.Fragment>
+ ) : (
+ areaRender()
+ )
+ }
+ </React.Fragment>
+ )
}
const StyledTab = styled(Grid)`