54 lines
2.2 KiB
JavaScript
54 lines
2.2 KiB
JavaScript
import * as React from 'react';
|
|
import Card from '@mui/material/Card';
|
|
import { List, ListItemAvatar } from '@mui/material';
|
|
import { ListItem } from '@mui/material';
|
|
import { ListItemText } from '@mui/material';
|
|
import PeopleIcon from '@mui/icons-material/People';
|
|
import SportsIcon from '@mui/icons-material/Sports';
|
|
import MapIcon from '@mui/icons-material/Map';
|
|
import EventIcon from '@mui/icons-material/Event';
|
|
import CardActions from '@mui/material/CardActions';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import Button from '@mui/material/Button';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
export default function MatchInfo() {
|
|
return (
|
|
<Card sx={{ maxWidth: 400 }}>
|
|
<CardContent>
|
|
<Typography sx={{ fontSize: 24 }} component="div">
|
|
King of the Court!
|
|
</Typography>
|
|
<List>
|
|
<ListItem>
|
|
<ListItemAvatar>
|
|
<SportsIcon />
|
|
</ListItemAvatar>
|
|
<ListItemText primary="Sport" secondary="Tennis" />
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemAvatar>
|
|
<PeopleIcon />
|
|
</ListItemAvatar>
|
|
<ListItemText primary="Participants" secondary="John Smith, Bob Williams, and Candice Baker" />
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemAvatar>
|
|
<MapIcon />
|
|
</ListItemAvatar>
|
|
<ListItemText primary="Location" secondary="Athletic Center - 55 Harbord St, Toronto, ON M5S 2W6" />
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemAvatar>
|
|
<EventIcon />
|
|
</ListItemAvatar>
|
|
<ListItemText primary="Time" secondary="1:00PM Tomorrow (January 13th)" />
|
|
</ListItem>
|
|
</List>
|
|
</CardContent>
|
|
<CardActions>
|
|
<Button size="Medium">Participate</Button>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
} |