diff options
| -rw-r--r-- | src/components/ReviewCard/ReviewCard.tsx | 43 | ||||
| -rw-r--r-- | src/pages/HomePage/HomePage.tsx | 13 |
2 files changed, 56 insertions, 0 deletions
diff --git a/src/components/ReviewCard/ReviewCard.tsx b/src/components/ReviewCard/ReviewCard.tsx new file mode 100644 index 0000000..9c3dd20 --- /dev/null +++ b/src/components/ReviewCard/ReviewCard.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Card, + CardContent, + Typography, + Divider +} from '@material-ui/core/'; +import { Rating } from '@material-ui/lab' +import { Feedback } from 'which-types'; + +import UserStrip from '../UserStrip/UserStrip'; + +interface PropTypes { + feedback: Feedback; +} + +const useStyles = makeStyles(theme => ({ + root: { + margin: theme.spacing(4, 0, 1, 0) + } +})); + +const ReviewCard: React.FC<PropTypes> = ({ feedback }) => { + const classes = useStyles(); + + return ( + <Card className={classes.root} elevation={2}> + <UserStrip + user={feedback.author} + info={<Rating value={feedback.score} readOnly size="small" />} + /> + <Divider /> + <CardContent> + <Typography> + {feedback.contents} + </Typography> + </CardContent> + </Card> + ); +}; + +export default ReviewCard; diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index f00289a..ab04281 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -14,6 +14,7 @@ import { Feedback } from 'which-types'; import { useNavigate } from '../../hooks/useNavigate'; import { useAuth } from '../../hooks/useAuth'; import { get } from '../../requests'; +import ReviewCard from '../../components/ReviewCard/ReviewCard'; const useStyles = makeStyles(theme => ({ root: { @@ -29,6 +30,11 @@ const useStyles = makeStyles(theme => ({ }, signup: { marginLeft: theme.spacing(2) + }, + reviews: { + [theme.breakpoints.up('md')]: { + padding: theme.spacing(0, 10) + } } })); @@ -63,6 +69,12 @@ const HomePage: React.FC = () => { const FeathersLink = <Link href="https://feathersjs.com">Feathers</Link>; const MUILink = <Link href="https://material-ui.com">Material-UI</Link>; + const Reviews = ( + <div className={classes.reviews}> + {feedbacks.map(feedback => <ReviewCard feedback={feedback} />)} + </div> + ); + return ( <div className={classes.root}> <Grid container spacing={4}> @@ -80,6 +92,7 @@ const HomePage: React.FC = () => { </Typography> </Grid> </Grid> + {Reviews} </Grid> <Grid item xs={12} md={5}> <Grid container direction="column" spacing={6}> |