Final RouteDetails rework

package.json

@@ -19,6 +19,7 @@
     "date-fns": "^2.12.0",
     "leaflet": "^1.6.0",
     "react": "^16.13.1",
+    "react-awesome-slider": "^4.1.0",
     "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",
@@ -27,6 +28,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.1",
+    "react-slick": "^0.25.2",
     "shx": "0.3.2",
     "solid": "^0.2.1",
     "solid-auth-client": "^2.4.1",

src/components/ui/MyCarousel.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import AwesomeSlider from 'react-awesome-slider';
+import withAutoplay from 'react-awesome-slider/dist/autoplay';
+import 'react-awesome-slider/dist/styles.css';
+
+const AutoplaySlider = withAutoplay(AwesomeSlider);
+
+export class MyCarousel extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            photos: this.props.photos,
+        }
+
+        this.media = [];
+        this.state.photos.forEach((p) => {
+            this.media.push({ source: p.getContent() });
+        });
+    }
+
+    render() {
+
+        return (
+
+            <AutoplaySlider
+                play={true}
+                cancelOnInteraction={false}
+                interval={6000}
+                media={this.media}
+            />
+        );
+    }
+}
+
+export default MyCarousel;

src/components/ui/MyRouteCard.js

@@ -5,7 +5,7 @@ import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
 import MapSnapshot from '../map/MapSnapshot.js'
 import Button from '@material-ui/core/Button';
-import { Link, Grid, CardMedia, CardHeader } from '@material-ui/core';
+import { Link, Grid, CardMedia } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -24,7 +24,6 @@ export default function MyRouteCard(props) {
   const { route } = props;
 
   var name = route.getName();
-  var distance = route.getDistance();
 
   return (
     <Card elevation={5} className={classes.root}>