iniciando loja

src/Routes.js

@@ -14,6 +14,7 @@ import CreateMission from './screen/missions/CreateMission.js'
 import CreateEvents from './screen/events/CreateEvents.js'
 import CreateChoices from './screen/choices/CreateChoices.js'
 import Panels from './screen/panels/Panels.js'
+import Store from './screen/store/Store'
 import Teste from './Teste.js'
 
 /*
@@ -91,6 +92,7 @@ const Routes = () => {
             <Route path = '/missoes' component = {TopicsMissions}/>
             <Route path = '/eventos' component = {TopicsEvents}/>
             <Route path = '/paineis' component = {Panels}/>
+            <Route path = '/loja' component = {Store}/>
             <Route path = '/feed' component = {() => <h1>rota feed</h1>}/>
             <Route path = '/missoes1' component = {() => <h1>rota missoes1</h1>}/>
             <Route path = '/escolhas1' component = {() => <h1>rota escolhas1</h1>}/>

src/menu/NavigationMenu.js

@@ -161,6 +161,10 @@ function NavigationMenu() {
       <Button color="inherit">
         <Link to="/paineis" id='link'> <span> Painéis </span> </Link>
       </Button>
+
+      <Button color="inherit">
+        <Link to="/loja" id='link'> <span> Loja </span> </Link>
+      </Button>
     </div>
   )
 

src/screen/store/Item.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import ButtonBase from '@material-ui/core/ButtonBase';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    margin: 'auto',
+    maxWidth: 500,
+  },
+  image: {
+    width: 128,
+    height: 128,
+  },
+  img: {
+    margin: 'auto',
+    display: 'block',
+    maxWidth: '100%',
+    maxHeight: '100%',
+  },
+}));
+
+export default function Item() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <Grid container spacing={2}>
+          <Grid item>
+            <ButtonBase className={classes.image}>
+              <img className={classes.img} alt="complex" src="/static/images/grid/complex.jpg" />
+            </ButtonBase>
+          </Grid>
+          <Grid item xs={12} sm container>
+            <Grid item xs container direction="column" spacing={2}>
+              <Grid item xs>
+                <Typography gutterBottom variant="subtitle1">
+                  Standard license
+                </Typography>
+                <Typography variant="body2" gutterBottom>
+                  Full resolution 1920x1080 • JPEG
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  ID: 1030114
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Typography variant="body2" style={{ cursor: 'pointer' }}>
+                  Remove
+                </Typography>
+              </Grid>
+            </Grid>
+            <Grid item>
+              <Typography variant="subtitle1">$19.00</Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}

src/screen/store/SiteStore.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import GridListTileBar from '@material-ui/core/GridListTileBar';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import IconButton from '@material-ui/core/IconButton';
+import InfoIcon from '@material-ui/icons/Info';
+
+
+const tileData = [
+    {
+      img: '/static/images/grid-list/breakfast.jpg',
+      title: 'Breakfast',
+      author: 'jill111',
+      cols: 2,
+      featured: true,
+    },
+    {
+      img: '/static/images/grid-list/burgers.jpg',
+      title: 'Tasty burger',
+      author: 'director90',
+    },
+    {
+      img: '/static/images/grid-list/camera.jpg',
+      title: 'Camera',
+      author: 'Danson67',
+    },
+    {
+      img: '/static/images/grid-list/morning.jpg',
+      title: 'Morning',
+      author: 'fancycrave1',
+      featured: true,
+    },
+    {
+      img: '/static/images/grid-list/hats.jpg',
+      title: 'Hats',
+      author: 'Hans',
+    },
+    {
+      img: '/static/images/grid-list/honey.jpg',
+      title: 'Honey',
+      author: 'fancycravel',
+    },
+    {
+      img: '/static/images/grid-list/vegetables.jpg',
+      title: 'Vegetables',
+      author: 'jill111',
+      cols: 2,
+    },
+    {
+      img: '/static/images/grid-list/plant.jpg',
+      title: 'Water plant',
+      author: 'BkrmadtyaKarki',
+    },
+    {
+      img: '/static/images/grid-list/mushroom.jpg',
+      title: 'Mushrooms',
+      author: 'PublicDomainPictures',
+    },
+    {
+      img: '/static/images/grid-list/olive.jpg',
+      title: 'Olive oil',
+      author: 'congerdesign',
+    },
+    {
+      img: '/static/images/grid-list/star.jpg',
+      title: 'Sea star',
+      cols: 2,
+      author: '821292',
+    },
+    {
+      img: '/static/images/grid-list/bike.jpg',
+      title: 'Bike',
+      author: 'danfador',
+    },
+  ];
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    overflow: 'hidden',
+    backgroundColor: theme.palette.background.paper,
+  },
+  gridList: {
+    //width: 500,
+    //height: 450,
+  },
+  icon: {
+    color: 'rgba(255, 255, 255, 0.54)',
+  },
+}));
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ *   {
+ *     img: image,
+ *     title: 'Image',
+ *     author: 'author',
+ *   },
+ *   {
+ *     [etc...]
+ *   },
+ * ];
+ */
+export default function SiteStore() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <GridList cellHeight={180} className={classes.gridList}>
+        <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
+          <ListSubheader component="div">December</ListSubheader>
+        </GridListTile>
+        {tileData.map(tile => (
+          <GridListTile key={tile.img}>
+            <img src={tile.img} alt={tile.title} />
+            <GridListTileBar
+              title={tile.title}
+              subtitle={<span>by: {tile.author}</span>}
+              actionIcon={
+                <IconButton aria-label={`info about ${tile.title}`} className={classes.icon}>
+                  <InfoIcon />
+                </IconButton>
+              }
+            />
+          </GridListTile>
+        ))}
+      </GridList>
+    </div>
+  );
+}

src/screen/store/Store.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import PhoneIcon from '@material-ui/icons/Phone';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import PersonPinIcon from '@material-ui/icons/PersonPin';
+import HelpIcon from '@material-ui/icons/Help';
+import ShoppingBasket from '@material-ui/icons/ShoppingBasket';
+import ThumbDown from '@material-ui/icons/ThumbDown';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Table from '../../components/Table';
+import SiteStore from './SiteStore';
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <Typography
+      component="div"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`scrollable-force-tabpanel-${index}`}
+      aria-labelledby={`scrollable-force-tab-${index}`}
+      {...other}
+    >
+      <Box p={10}>{children}</Box>
+    </Typography>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `scrollable-force-tab-${index}`,
+    'aria-controls': `scrollable-force-tabpanel-${index}`,
+  };
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+  },
+  card:{
+    width:"50%"
+  },
+  paper: {
+    padding: theme.spacing(2),
+    margin: 'auto',
+    maxWidth: 500,
+  },
+  image: {
+    width: 128,
+    height: 128,
+  },
+  img: {
+    margin: 'auto',
+    display: 'block',
+    maxWidth: '100%',
+    maxHeight: '100%',
+  },
+}));
+
+
+
+export default function Store() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  function handleChange(event, newValue) {
+    setValue(newValue);
+  }
+
+
+
+  return (
+    <div className={classes.root}>
+      <Card>     
+      <AppBar position="static" color="default">
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          variant="fullWidth"
+          //variant="scrollable"
+          scrollButtons="on"
+          indicatorColor="secondary"
+          textColor="secondary"
+          aria-label="scrollable force tabs example"
+        >
+
+          <Tab label="Meus Itens" icon={<PersonPinIcon />} {...a11yProps(0)} />          
+          <Tab label="Loja" icon={<ShoppingBasket />} {...a11yProps(1)} />
+
+        </Tabs>
+      </AppBar>
+      <CardContent>
+      <TabPanel value={value} index={0}>
+      <Table/>
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        <SiteStore/>
+      </TabPanel>
+      </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+