Add template Step component with configurable background image and content

frontend/src/components/steps/Location.js

@@ -1,13 +1,15 @@
-import React from 'react'
-import { Container } from 'reactstrap';
+import Step from '../Step';
 
+export default function LocationStep() {
+    const locationInfoPanel = (
+        <h1>Location Information</h1>
+    )
 
-export default class Step1 extends React.Component {
-    render() {
-        return (
-            <div className="pt-4">
-                <p>Please choose your location...</p>
-            </div>
-        )
-    }
-}
+    const locationSelectionPanel = (
+        <h1>Location Selection</h1>
+    )
+
+    return (
+        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
+    )
+}

frontend/src/components/steps/Results.js

@@ -1,18 +1,20 @@
-import React from 'react'
-import { Container, ListGroup, ListGroupItem } from 'reactstrap';
+// import React from 'react'
+import Step from '../Step';
+import { ListGroup, ListGroupItem } from 'reactstrap';
 
+export default function Results(props) {
+    const stepContent = (
+        <div>
+        <h5 className="pt-4">Plant List</h5>
+        <ListGroup>
+            {props.plants.map(function (plant, i) {
+                return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
+            })}
+        </ListGroup>
+        </div>
+    )
 
-export default class Step3 extends React.Component {
-    render() {
-        return (
-            <Container className="p-2">
-                <h5 className="pt-4">Plant List</h5>
-                <ListGroup>
-                    {this.props.plants.map(function (plant, i) {
-                        return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
-                    })}
-                </ListGroup>
-            </Container>
-        )
-    }
+    return (
+        <Step contentComponent={stepContent} />
+    )
 }

frontend/src/components/steps/Soil.js

@@ -1,13 +1,15 @@
-import React from 'react'
-import { Container } from 'reactstrap';
+import Step from '../Step';
 
+export default function SoilVariantStep() {
+    const soilVarientInfoPanel = (
+        <h1>Soil Information</h1>
+    )
 
-export default class Step2 extends React.Component {
-    render() {
-        return (
-            <Container className="pt-4">
-                <p >Sample step</p>
-            </Container>
-        )
-    }
+    const soilVarientSelectionPanel = (
+        <h1>Soil Selection</h1>
+    )
+
+    return (
+        <Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
+    )
 }