ruidy/football-summaries
1
0
Fork 0
mirror of https://github.com/rjNemo/football-summaries synced 2026-06-06 02:16:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style matchFull component

Browse source
This commit is contained in:
Ruidy Nemausat 2020-08-03 21:44:06 +02:00
parent 747d56fdeb
commit b303368eb1
1 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/MatchFull.tsx
View file

@ -1,22 +1,38 @@
import React, { FC } from "react";
import Moment from "react-moment";
import { Container, Typography } from "@material-ui/core";
import { Container, Typography, makeStyles } from "@material-ui/core";
import IGame from "../types/Game";
const MatchFull: FC<{ game: IGame }> = ({ game }) => (
<Container>
<Typography gutterBottom variant="h5" component="h3">
{game.title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{game.competition.name}
<br />
<Moment format="DD MMMM YYYY - HH:mm">{game.date}</Moment>
</Typography>
const useStyles = makeStyles({
root: {
marginTop: "16px",
marginBottom: "16px",
},
video: {
marginTop: "16px",
},
});
<div dangerouslySetInnerHTML={{ __html: game.videos[0].embed }}></div>
</Container>
);
const MatchFull: FC<{ game: IGame }> = ({ game }) => {
const classes = useStyles();
return (
<Container className={classes.root}>
<Typography gutterBottom variant="h5" component="h3">
{game.title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{game.competition.name}
<br />
<Moment format="DD MMMM YYYY - HH:mm">{game.date}</Moment>
</Typography>
<div
className={classes.video}
dangerouslySetInnerHTML={{ __html: game.videos[0].embed }}
></div>
</Container>
);
};
export default MatchFull;