Add workshop implementation

Author: Abhishek-kumar09

package-lock.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@date-io/core": "^2.5.0",
+    "@date-io/date-fns": "^1.3.13",
     "@date-io/moment": "^1.3.13",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
@@ -59,6 +60,7 @@
     "change-case": "^4.1.1",
     "chart.js": "^2.9.3",
     "clsx": "^1.1.0",
+    "date-fns": "^2.0.0-beta.5",
     "draft-js": "^0.11.5",
     "firebase": "^7.19.1",
     "formik": "^2.1.4",

package.json

@@ -10,6 +10,7 @@ import CoursesView from 'src/views/pages/CoursesView';
 import ProfileView from 'src/views/pages/ProfileView';
 import ApplicationsView from 'src/views/pages/ApplicationsView';
 import Error404View from 'src/views/pages/Error404View';
+import WorkshopView from 'src/views/pages/WorkshopView';
 
 import MachineLearningView from 'src/views/pages/Courses/MachineLearningView';
 import AlgoJavaView from 'src/views/pages/Courses/AlgoJavaView';
@@ -82,6 +83,15 @@ const renderRoutes = () => (
           </MainLayout>
         )}
       />
+      <Route
+        path="/workshops"
+        exact
+        render={props => (
+          <MainLayout>
+            <WorkshopView {...props} />
+          </MainLayout>
+        )}
+      />
 
       <Route
         path={`/machine-learning-using-python`}

src/Routes.js

@@ -9,4 +9,4 @@ export const horizontalGradient =
   'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
 
 export const verticalGradient =
-  'linear-gradient(180.72deg, #180255 0.25%, #000000 97.54%)';
+  'linear-gradient(180.72deg, #180255 0.25%, #000000 85.54%)';

src/views/pages/Courses/partials/Projects.js renamed to src/components/SidePanel/Projects.js

@@ -0,0 +1,48 @@
+const worksop = {
+  policies: {
+    title: 'Workshop Policies',
+    body: [
+      "What is Lorem Ipsum Lorem Ipsum is simply dummy text of  text of  text of ",
+      "What is Lorem Ipsum Lorem Ipsum is simply  text of",
+      "What is Lorem Ipsum Lorem Ipsum is simply dummy text  text of",
+      "What is Lorem Ipsum Lorem Ipsum  text of"
+    ]
+  },
+  must_do: {
+    title: 'Workshop Requestors Must Do',
+    body: [
+      "What is Lorem Ipsum Lorem Ipsum is simply dummy text of  text of  text of of  text of  text of of  text of  text of sfsfterwdvyh",
+      "What is Lorem Ipsum Lorem Ipsum is simply  text of",
+      "What is Lorem Ipsum Lorem Ipsum is simply dummy text  text of",
+      "What is Lorem Ipsum Lorem Ipsum  text of of  text of  text of of  text of  text of"
+    ]
+  },
+  projects: [
+    {
+      title: 'Mobile App Development',
+      img: '/static/images/courses/projects/split.png'
+    },
+    {
+      title: 'File Encryption and Compression',
+      img: '/static/images/courses/projects/security.jpg'
+    },
+    {
+      title: 'Api calls',
+      img: '/static/images/courses/projects/apicall.jpg'
+    },
+    {
+      title: 'Git Version Control Replica',
+      img: '/static/images/courses/projects/git.png'
+    },
+    {
+      title: 'Mobile App Development',
+      img: '/static/images/courses/projects/split.png'
+    },
+    {
+      title: 'Mobile App Development',
+      img: '/static/images/courses/projects/split.png'
+    },
+  ]
+};
+
+export default worksop;

src/constants/index.js

@@ -4,7 +4,7 @@ import { Grid, Box, Hidden } from '@material-ui/core';
 import Details from './partials/Details';
 import Overview from './partials/Overview';
 import Topics from './partials/Topics';
-import Projects from './partials/Projects';
+import Projects from '../../../components/SidePanel/Projects';
 
 const useStyles = makeStyles(theme => ({
   icon: {