From ab95f9eee6b19ea2d51a5b85f59ac270040097d1 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Mon, 31 Aug 2020 13:15:50 +0200
Subject: [PATCH] overview of tutorials

---
 src/App.css                             |  2 +-
 src/components/Tutorial/TutorialHome.js | 20 +++++++++++++++++++-
 src/components/Tutorial/tutorials.json  |  1 +
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Tutorial/tutorials.json

diff --git a/src/App.css b/src/App.css
index a8c8f37..adadb75 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,5 +3,5 @@
   overflow: hidden;
   display: block;
   position: relative;
-  /* padding-bottom: 60px; /* height of your footer + 30px*/
+  padding-bottom: 60px; /* height of your footer + 30px*/
 }
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
index ade1cc1..fbaf47d 100644
--- a/src/components/Tutorial/TutorialHome.js
+++ b/src/components/Tutorial/TutorialHome.js
@@ -1,9 +1,27 @@
 import React, { Component } from 'react';
 
+import tutorials from './tutorials.json';
+
+import { Link } from 'react-router-dom';
+
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+
 class TutorialHome extends Component {
   render() {
     return (
-      <h1>Tutorial Home</h1>
+      <div>
+        <h1>Tutorial-Übersicht</h1>
+        <Grid container spacing={2}>
+          {tutorials.map((tutorial, i) => (
+            <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
+              <Link to={`/tutorial/${i+1}`} style={{textDecoration: 'none', color: 'inherit'}}>
+                <Paper style={{height: '150px', padding: '10px'}}>Tutorial {i+1}</Paper>
+              </Link>
+            </Grid>
+          ))}
+        </Grid>
+      </div>
     );
   };
 }
diff --git a/src/components/Tutorial/tutorials.json b/src/components/Tutorial/tutorials.json
new file mode 100644
index 0000000..d4bd5f9
--- /dev/null
+++ b/src/components/Tutorial/tutorials.json
@@ -0,0 +1 @@
+[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]