wip

src/Pages/ResourcePage.js

@@ -16,16 +16,70 @@ 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, {Component} from 'react';
-import AboutResource from '../Components/AboutResource'
+import React, {useEffect, useState} from 'react'
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
 
-class ResourcePage extends Component {
+export default function LearningObjectPage (props){
+    const id = props.match.params.recursoId
 
-    render() {
-      return (
-        <AboutResource/>
-      );
-    }
-  }
+    useEffect( () => {
+        axios.get( (`${apiUrl}/learning_objects/` + id )
+    ).then( (response) => {console.log(response)}, (error) => {console.log(error)})
+    }, [])
+
+    return (
+        <Background>
+            <Grid container spacing={2}>
+                <Grid item xs={12}>
+                    <Card>
+                        <div style={{height : "50px", width : "100px"}}>
+                            <span>stuff goes here</span>
+                        </div>
+                    </Card>
+                </Grid>
+                <Grid item xs={12}>
+                    <Card>
+                        <div style={{height : "50px", width : "100px"}}>
+                            <span>stuff goes here</span>
+                        </div>
+                    </Card>
+                </Grid>
+                <Grid item xs={12}>
+                    <Card>
+                        <div style={{height : "50px", width : "100px"}}>
+                            <span>stuff goes here</span>
+                        </div>
+                    </Card>
+                </Grid>
+            </Grid>
+        </Background>
+    )
+}
+
+const Background = styled.div`
+    background-color : #f4f4f4;
+    color : #666;
+    font-family : 'Roboto', sans serif;
+`
 
-export default ResourcePage;
+const Card = styled.div`
+    background-color : #fff;
+    box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    margin-bottom : 30px;
+    margin-right : auto;
+    margin-left : auto;
+    display : flex;
+    flex-direction : column;
+    @media screen and (min-width: 1200px) {
+        width : 1170px;
+    }
+    @media screen and (min-width: 992px) and (max-width : 1199px){
+        width : 970px;
+    }
+    @media screen and (min-width: 768px) and (max-width : 991px) {
+        width : 750px;
+    }
+`