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

add material UI

Browse source
This commit is contained in:
Ruidy Nemausat 2020-07-21 22:23:48 +02:00
parent 01faa0fd7f
commit de5c4def4d
2 changed files with 43 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/MatchItem.tsx
View file

@ -1,27 +1,57 @@
import React, { FC } from "react"; import React, { FC } from "react";
import Moment from "react-moment"; import Moment from "react-moment";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
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 CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import IGame from "../types/Game"; import IGame from "../types/Game";
const useStyles = makeStyles({
root: {
maxWidth: 345,
marginTop: "16px",
},
media: {
height: 140,
},
});
const MatchItem: FC<IGame> = ({ const MatchItem: FC<IGame> = ({
title, title,
id, id,
thumbnail, thumbnail,
date, date,
competition: { name }, competition: { name },
}) => ( }) => {
<div> const classes = useStyles();
<h3> return (
<Link to={"/" + id}>{title}</Link> <Card className={classes.root}>
</h3> <CardActionArea>
<p>{name}</p> <CardMedia className={classes.media} image={thumbnail} title={title} />
<p> <CardContent>
<Moment format="DD MMMM YYYY - HH:mm">{date}</Moment> <Typography gutterBottom variant="h5" component="h3">
</p> {title}
<img src={thumbnail} alt={title} /> </Typography>
{/* <div dangerouslySetInnerHTML={{ __html: embed }}></div> */} <Typography variant="body2" color="textSecondary" component="p">
</div> {name}
); <br />
<Moment format="DD MMMM YYYY - HH:mm">{date}</Moment>
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary" component={Link} to={"/" + id}>
More details
</Button>
</CardActions>
</Card>
);
};
export default MatchItem; export default MatchItem;

1
src/components/MatchList.tsx
View file

@ -1,5 +1,4 @@
import React, { FC, useState, useEffect } from "react"; import React, { FC, useState, useEffect } from "react";
import { Container } from "@material-ui/core"; import { Container } from "@material-ui/core";
import Loader from "./Loader"; import Loader from "./Loader";