diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js new file mode 100644 index 0000000..05501ba --- /dev/null +++ b/src/components/Breadcrumbs.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; + +import { Link } from 'react-router-dom'; + +import Breadcrumbs from '@material-ui/core/Breadcrumbs'; +import Typography from '@material-ui/core/Typography'; + +class MyBreadcrumbs extends Component { + render() { + return ( + this.props.content && this.props.content.length > 1 ? + + {this.props.content.splice(0, this.props.content.length-1).map((content, i) => ( + + {content.title} + + ))} + {this.props.content.slice(-1)[0].title} + + : null + ); + }; +} + +export default MyBreadcrumbs; diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index 15ea3a0..9d92492 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/src/components/Tutorial/Tutorial.js @@ -2,11 +2,16 @@ import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; +import Breadcrumbs from '../Breadcrumbs'; + class Tutorial extends Component { render() { - console.log(this.props); return ( -

Tutorial {this.props.match.params.tutorialId}

+
+ + +

Tutorial {this.props.match.params.tutorialId}

+
); }; } diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js index fbaf47d..edd125d 100644 --- a/src/components/Tutorial/TutorialHome.js +++ b/src/components/Tutorial/TutorialHome.js @@ -1,5 +1,7 @@ import React, { Component } from 'react'; +import Breadcrumbs from '../Breadcrumbs'; + import tutorials from './tutorials.json'; import { Link } from 'react-router-dom'; @@ -11,6 +13,8 @@ class TutorialHome extends Component { render() { return (
+ +

Tutorial-Übersicht

{tutorials.map((tutorial, i) => (