feat: Implement a scoreboard

src/pages/dashboard.tsx

@@ -3,50 +3,43 @@ import * as React from "react";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
+import Paper from "@material-ui/core/Paper";
+
+import Scoreboard from "../components/scoreboard";
 
 import { ILesson } from "../models/lesson";
+import { ILearner } from "../models/learner";
 
 interface IProps {
     lessons: ILesson[];
+    learners: ILearner[];
 }
 
 export default class Dashboard extends React.Component<{}> {
-    constructor(props: any) {
-        super(props);
-    }
-
     render() {
         const small = window.matchMedia("(max-width: 700px)").matches;
-        const cName = small ? "lesson-card-xs" : "lesson-card-lg";
+        const direction = small ? "column" : "row";
 
-        let key = 0;
-        const lessonToCard = (lesson: ILesson) => {
-            return <Grid item key={key++}>
-                <Card style={{
-                    width: small ? window.width - 32 : "300px"
-                }}>
-                    <CardContent className={cName}>
-                        <Typography variant="title">{`Level ${lesson.level}`}</Typography>
-                        <Typography variant="title" component="p">{lesson.name}</Typography>
-                        <br />
-                        <Typography component="p">
-                            {lesson.desc}
-                        </Typography>
-                    </CardContent>
-                    <CardActions>
-                        <Button className="lesson-card-btn">
-                            Zum Level
-                        </Button>
-                    </CardActions>
-                </Card>
-            </Grid>;
-        };
+        return <Grid container direction={direction} spacing={16}>
+            <Grid item lg={4}>
+                <Paper className="paper">
+                    N&auml;chstes Level
+                </Paper>
+            </Grid>
+            <Grid item lg={4}>
+                <Paper className="paper">
+                    <Typography variant="title" component="p">
+                        Rangliste
+                    </Typography>
 
-        return <Grid container spacing={16} direction="row">
-            {this.props.lessons.map(lessonToCard)}
-        </Grid>
+                    <Scoreboard learners={this.props.learners} />
+                </Paper>
+            </Grid>
+            <Grid item lg={4}>
+                <Paper className="paper">
+                    Some stuff
+                </Paper>
+            </Grid>
+        </Grid>;
     }
 };