53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
|
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 { ILesson } from "../models/lesson";
|
||
|
|
|
||
|
|
interface IProps {
|
||
|
|
lessons: ILesson[];
|
||
|
|
}
|
||
|
|
|
||
|
|
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";
|
||
|
|
|
||
|
|
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 spacing={16} direction="row">
|
||
|
|
{this.props.lessons.map(lessonToCard)}
|
||
|
|
</Grid>
|
||
|
|
}
|
||
|
|
};
|