services add

Author: root

client/src/components/App.jsx

@@ -6,6 +6,8 @@ import Service from "./Service.jsx";
 import VideoPlayer from "./VideoPlayer.jsx";
 import API_KEY from "../../../config";
 import Banner from "./Banner.jsx";
+import YogaIcon from "./ExerciseService.jsx";
+import ExtraServices from "./ExtraServices.jsx";
 const navItems = [
   {
     name: "About",
@@ -66,6 +68,7 @@ class App extends React.Component {
           <Banner />
           <VideoPlayer submit={this.handleSubmit} videos={videos} />
           <Service />
+          <ExtraServices />
         </div>
       </div>
     );

client/src/components/ExerciseService.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { GrYoga, GrRun, GrCafeteria } from "react-icons/gr";
+
+class ExerciseService extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+  render() {
+    let iconChoice;
+    if (this.props.icon === "run") {
+      iconChoice = <GrRun />;
+    } else if (this.props.icon === "yoga") {
+      iconChoice = <GrYoga />;
+    } else if (this.props.icon === "nutrition") {
+      iconChoice = <GrCafeteria />;
+    }
+    return (
+      <div className="service-box">
+        <div>
+          <h1 className="service-icon">{iconChoice}</h1>
+          <h4>{this.props.info}</h4>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ExerciseService;

client/src/components/ExtraServices.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+import ExerciseService from "./ExerciseService";
+
+class ExtraServices extends Component {
+  render() {
+    return (
+      <div className="services-container">
+        <h2 className="services-title">More Services</h2>
+        <div className="service-boxes">
+          <ExerciseService info="Running Club" icon="run" />
+          <ExerciseService info="Yoga Class" icon="yoga" />
+          <ExerciseService info="Nutrition Workshop" icon="nutrition" />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ExtraServices;