diff --git a/src/App.js b/src/App.js
index 11961c4f65524e29d50070101c7ce2103f73ffd8..167640080e8385f13cedce5fb2906cba04856c14 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import Header from './Components/Header'
import EcFooter from './Components/EcFooter';
import GNUAGPLfooter from './Components/AGPLFooter';
import UserPage from './Pages/UserPage';
+import ResourcePage from './Pages/ResourcePage';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import { Store } from './Store'
@@ -46,9 +47,10 @@ export default function App(){
<Route path="/" exact={true} component={Home}/>
<Route path="/busca" component={Search} />
<Route path="/usuario" component={UserPage} />
+ <Route path="/recurso" component={ResourcePage}/>
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
</BrowserRouter>
)
-}
\ No newline at end of file
+}
diff --git a/src/Components/AboutResource.js b/src/Components/AboutResource.js
new file mode 100644
index 0000000000000000000000000000000000000000..49831901165fde4f0d604a82f5d594c0f57c9e7d
--- /dev/null
+++ b/src/Components/AboutResource.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import {apiUrl} from '../env';
+import Paper from '@material-ui/core/Paper';
+import { withStyles } from '@material-ui/styles';
+import Typography from '@material-ui/core/Typography';
+import CardContent from '@material-ui/core/CardContent';
+import Collapse from '@material-ui/core/Collapse';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardActions from '@material-ui/core/CardActions';
+import Avatar from '@material-ui/core/Avatar';
+import IconButton from '@material-ui/core/IconButton';
+import { red } from '@material-ui/core/colors';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import ShareIcon from '@material-ui/icons/Share';
+import ReportIcon from '@material-ui/icons/Error';
+import AddIcon from '@material-ui/icons/CreateNewFolder';
+const contentStyle={
+ margin: "2% 15% 2% 15%",
+};
+export default function AboutResource() {
+
+ const [expanded, setExpanded] = React.useState(false);
+
+ function handleExpandClick() {
+ setExpanded(!expanded);
+ }
+
+ return (
+ <div>
+ <Paper style={contentStyle}>
+ <CardContent>
+ <Typography variant="h5" color="textSecondary" component="h3">
+ fICHA TÉCNICA
+ </Typography>
+ <div> tagsss </div>
+ <Typography component="p" color="textSecondary">
+ Paper can be used to build surface or other elements for your application.
+ </Typography>
+ <CardMedia
+ image="/static/images/cards/paella.jpg"/>
+ <CardActions style={{justifyContent: "space-between", fontSize: "0.7rem"}}>
+ <IconButton aria-label="Reportar" size="small">
+ <ReportIcon /> REPORTAR </IconButton>
+ <IconButton aria-label="Compartilhar">
+ <ShareIcon /> COMPARTILHAR </IconButton>
+ <IconButton aria-label="Guardar">
+ <AddIcon /> GUARDAR </IconButton>
+ </CardActions>
+ </CardContent>
+ </Paper>
+ <Paper style={contentStyle}>
+ <CardContent>
+ <Typography variant="h5" color="textSecondary" component="h3">
+ Sobre o Recurso
+ </Typography>
+ <Typography component="p" color="textSecondary">
+ Paper can be used to build surface or other elements for your application.
+ </Typography>
+ </CardContent>
+ <CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "center"}}>
+ <IconButton
+ onClick={handleExpandClick}
+ aria-expanded={expanded}
+ aria-label="show more"
+ style={{fontSize: "1.2rem", padding: "0px"}}>
+ Ver Mais
+ <ExpandMoreIcon size="small"/>
+ </IconButton>
+ </CardActions>
+ <Collapse in={expanded} timeout="auto" unmountOnExit>
+ <CardContent>
+ <Typography paragraph>Method:</Typography>
+ <Typography paragraph>
+ Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+ minutes.
+ </Typography>
+ <Typography paragraph>
+ Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+ heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+ browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
+ and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
+ pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
+ saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+ </Typography>
+ <Typography paragraph>
+ Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
+ without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
+ medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
+ again without stirring, until mussels have opened and rice is just tender, 5 to 7
+ minutes more. (Discard any mussels that don’t open.)
+ </Typography>
+ <Typography>
+ Set aside off of the heat to let rest for 10 minutes, and then serve.
+ </Typography>
+ </CardContent>
+ </Collapse>
+ </Paper>
+ </div>
+ );
+}
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
index f55985e285cd52b495e7ef77eb3cf7a20eff5600..53a9d2e2a7913dece8fc22c94d8e8c963437fe42 100644
--- a/src/Components/CollectionCard.js
+++ b/src/Components/CollectionCard.js
@@ -91,6 +91,7 @@ class CollectionCard extends Component {
<div className={this.state.userStyle}>
<img style={slideStyle} src={this.state.userAvatar}/>
<div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
+ <div> tags </div>
</div>
<RenderThumbs thumbs={this.props.thumbnail}/>
<div style={authorStyle}>
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 837910b8217bcf990a00a01148d5347ced38dd69..267e1826d36e7301c77db7ddceddeb931bf42caa 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -40,8 +40,7 @@ const slideStyle={
const publisherStyle={
color: "white",
paddinLeft: "30px",
- fontSize: "15px"
-
+ fontSize: "15px",
};
class ResourceCard extends Component {
@@ -85,7 +84,7 @@ class ResourceCard extends Component {
<Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}>
<div className={this.state.userStyle}>
<img style={slideStyle} src={this.state.userAvatar}/>
- <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
+ <Typography style={publisherStyle}>Enviado por: <br/>{this.props.author}</Typography>
</div>
<img src={this.state.thumbnail} style={{height:"100%"}}alt="thumbnail do recurso"/>
</Container>
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 718b08b6fcfe1c3f0aa4013f4e49baf2e56a89c8..7889dadf086d59af19f5a3c2ccf06d0f0fe60bd0 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -10,7 +10,7 @@
bottom: 50% !important;
border-radius: 100% !important;
opacity: 0.8 !important;
- padding: -10px !important;
+ padding: 12px !important;
}
.MuiPaper-elevation1-209{
box-shadow: none !important;
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 3fa033abae1f43c035d80e597b6bae3bac0521c3..c743a6cb2a84121af41f7572f6f6154848b05c67 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -1,10 +1,15 @@
import React, {Component} from 'react';
-
+import AboutResource from '../Components/AboutResource'
class ResourcePage extends Component {
+ constructor(props){
+ super(props);
+
+ };
+
render() {
return (
- <h1> Página visulizar Recurso</h1>
+ <AboutResource/>
);
}
}