77 lines
1.7 KiB
JavaScript
77 lines
1.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import ListSubheader from '@mui/material/ListSubheader';
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
import moment from 'moment';
|
|
|
|
|
|
function Gamenight(props) {
|
|
|
|
const [dense, setDense] = useState(true);
|
|
|
|
let games = props.gamenight.game_list.map(g =>
|
|
(
|
|
<ListItem>
|
|
<ListItemText
|
|
primary={g.name}
|
|
/>
|
|
</ListItem>
|
|
)
|
|
);
|
|
|
|
let participants = props.gamenight.participants.map(p =>
|
|
(
|
|
<ListItem>
|
|
<ListItemText
|
|
primary={p.username}
|
|
/>
|
|
</ListItem>
|
|
)
|
|
)
|
|
|
|
return (
|
|
<div>
|
|
<IconButton
|
|
aria-label="back"
|
|
onClick={(e) => props.onDismis()}>
|
|
<ArrowBackIcon />
|
|
</IconButton>
|
|
|
|
<Typography type="h3">
|
|
{props.gamenight.name}
|
|
</Typography>
|
|
<Typography type="body1">
|
|
When: {moment(props.gamenight.datetime).format('LL HH:mm')}
|
|
</Typography>
|
|
|
|
<List
|
|
dense={dense}
|
|
aria-labelledby="games-subheader"
|
|
subheader={
|
|
<ListSubheader component="div" id="games-subheader">
|
|
Games:
|
|
</ListSubheader>
|
|
}>
|
|
{games}
|
|
</List>
|
|
<List
|
|
dense={dense}
|
|
aria-labelledby="participants-subheader"
|
|
subheader={
|
|
<ListSubheader component="div" id="participants-subheader">
|
|
Participants:
|
|
</ListSubheader>
|
|
}>
|
|
{participants}
|
|
</List>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Gamenight
|