grid layout #9

frontend/src/components/selectResource/index.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography'
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
 
 const useStyles = makeStyles(theme => ({
     card: {
@@ -11,13 +12,18 @@ const useStyles = makeStyles(theme => ({
 }));
 
 function CreateResourceCard(resource, classes) {
-    return (<Card className={classes.card}>
-        <CardContent>
-            <Typography variant="h5" component="h2">
-                {JSON.stringify(resource)}
-            </Typography>
-        </CardContent>
-    </Card>)
+    return (
+        <Grid item xs={4}>
+            <Card className={classes.card}>
+                <CardContent>
+                    <Typography variant="h6" component="h2">
+                        {resource["name"]}
+                    </Typography>
+                </CardContent>
+            </Card>
+        </Grid>
+
+    )
 }
 
 export default function SelectResource() {
@@ -38,9 +44,9 @@ export default function SelectResource() {
 
     return (
 
-        <React.Fragment>
+        <Grid container spacing={2}>
             {resources}
-        </React.Fragment>
+        </Grid>
 
     );
 }