75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import * as React from "react";
|
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import Grid from "@material-ui/core/Grid";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import Button from "@material-ui/core/Button";
|
|
import Paper from "@material-ui/core/Paper";
|
|
|
|
import Scoreboard from "../components/scoreboard";
|
|
import SummaryTable from "../components/SummaryTable";
|
|
|
|
import { ILevel } from "../models/level";
|
|
import { ILearner } from "../models/learner";
|
|
import { IReviewMetadata } from "../models/review";
|
|
|
|
interface IProps {
|
|
nextLevel: () => ILevel;
|
|
getLastReview: () => IReviewMetadata;
|
|
getTopTen: () => ILearner[];
|
|
}
|
|
|
|
export default class Dashboard extends React.Component<IProps> {
|
|
render() {
|
|
const small = window.matchMedia("(max-width: 700px)").matches;
|
|
const direction = small ? "column" : "row";
|
|
|
|
const level = this.props.nextLevel();
|
|
|
|
return <div>
|
|
<Grid container direction={direction} spacing={16}>
|
|
<Grid item lg={4}>
|
|
<Paper className="paper">
|
|
<Typography variant="title">{`Level ${level.level}`}</Typography>
|
|
<Typography variant="title" component="p">{level.name}</Typography>
|
|
<br />
|
|
<Typography component="p">
|
|
{level.desc}
|
|
</Typography>
|
|
<Button
|
|
component={Link}
|
|
to={`/level/${level.level}`}
|
|
className="lesson-card-btn">
|
|
Zum Level
|
|
</Button>
|
|
</Paper>
|
|
</Grid>
|
|
<Grid item lg={4}>
|
|
<Paper className="paper">
|
|
<Typography variant="title" component="p">
|
|
Rangliste: Top 10
|
|
</Typography>
|
|
|
|
<Scoreboard topTen={this.props.getTopTen()} />
|
|
</Paper>
|
|
</Grid>
|
|
<Grid item lg={4}>
|
|
<Paper className="paper">
|
|
<Typography variant="title">
|
|
Letzte Wiederholung
|
|
</Typography>
|
|
<SummaryTable reviewMeta={this.props.getLastReview} />
|
|
|
|
<Button
|
|
component={Link}
|
|
to="/review/queue">
|
|
Vokabeln üben
|
|
</Button>
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
</div>;
|
|
}
|
|
};
|