rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

groups design

Browse Source
This commit is contained in:
Joshua Hsueh 2021-04-10 22:02:17 -04:00
parent 5269d9b889
commit a1663d0f9a
2 changed files with 162 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/Groups.tsx
View File

@ -1,8 +1,34 @@
import Button from '@material-ui/core/Button';
import React, { useState, useEffect } from 'react';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Box from '@material-ui/core/Box';
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
justifyContent: 'center',
},
media: {
height: 140,
},
button: {
margin: theme.spacing(1),
background: '#40E0D0',
'&:hover': {
background: '#FFFFFF',
},
},
}));
const Groups = () => {
const classes = useStyles();
const [state, setState] = useState({
Groups: [
MyGroups: [
{
id: 1,
group_title: 'TJ',
@ -24,39 +50,73 @@ const Groups = () => {
callAPI();
}, []);
return (
<div className="bg-dark" style={{ minHeight: '100vh' }}>
<div
className=""
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
>
<h1
className="d-flex justify-content-center p-4"
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
style={{ backgroundColor: '#F1EAE8' }}
>
Groups
</h1>
<a
className="btn btn-large btn-success"
href="/create_group"
style={{ fontFamily: 'Courier New' }}
>
Create Group
</a>
<Box textAlign="center">
<Button
variant="contained"
className={classes.button}
startIcon={<CloudUploadIcon />}
href="/create_group"
>
Create Group
</Button>
</Box>
<div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br>
{state.Groups.map((group, index) => {
{state.MyGroups.map((group, index) => {
let background;
if (index % 2 === 0) {
background = '#F1EAE8';
} else {
background = '#FFFFFF';
}
return (
<div
className="card card-body text-left"
style={{
backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF',
}}
<Card
className={classes.root + 'd-inline-flex'}
style={{ margin: '0.5rem' }}
>
<form action={'/requestgroup/' + group.id} method="POST">
<p className="card-title">{group.group_title}</p>
<input
type="submit"
value="Request to Join"
className="btn btn-success d-flex"
/>
</form>
</div>
<CardActionArea href={'/group/' + group.id}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{group.group_title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
></Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button
size="small"
color="primary"
onClick={() => {
let link: string = 'localhost:3000/group/' + group.id;
navigator.clipboard.writeText(link);
}}
>
Share
</Button>
<Button
href={'/group/' + group.id}
size="small"
color="primary"
>
Learn More
</Button>
</CardActions>
</Card>
);
})}
</div>

93
src/components/MyGroups.tsx
View File

@ -1,6 +1,32 @@
import Button from '@material-ui/core/Button';
import React, { useState, useEffect } from 'react';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Box from '@material-ui/core/Box';
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
justifyContent: 'center',
},
media: {
height: 140,
},
button: {
margin: theme.spacing(1),
background: '#40E0D0',
'&:hover': {
background: '#FFFFFF',
},
},
}));
const MyGroups = () => {
const classes = useStyles();
const [state, setState] = useState({
MyGroups: [
{
@ -24,20 +50,26 @@ const MyGroups = () => {
callAPI();
}, []);
return (
<div className="bg-dark" style={{ minHeight: '100vh' }}>
<div
className=""
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
>
<h1
className="d-flex justify-content-center p-4"
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
style={{ backgroundColor: '#F1EAE8' }}
>
My Groups
</h1>
<a
className="btn btn-large btn-success"
href="/create_group"
style={{ fontFamily: 'Courier New' }}
>
Create Group
</a>
<Box textAlign="center">
<Button
variant="contained"
className={classes.button}
startIcon={<CloudUploadIcon />}
href="/create_group"
>
Create Group
</Button>
</Box>
<div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br>
{state.MyGroups.map((group, index) => {
@ -48,14 +80,43 @@ const MyGroups = () => {
background = '#FFFFFF';
}
return (
<div
className="card card-body text-left"
style={{ backgroundColor: background }}
<Card
className={classes.root + 'd-inline-flex'}
style={{ margin: '0.5rem' }}
>
<a href={'/group/' + group.id} className="card-title">
{group.group_title}
</a>
</div>
<CardActionArea href={'/group/' + group.id}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{group.group_title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
></Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button
size="small"
color="primary"
onClick={() => {
let link: string = 'localhost:3000/group/' + group.id;
navigator.clipboard.writeText(link);
}}
>
Share
</Button>
<Button
href={'/group/' + group.id}
size="small"
color="primary"
>
Learn More
</Button>
</CardActions>
</Card>
);
})}
</div>