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",
@@ -61,6 +62,7 @@
     "clsx": "^1.1.0",
     "draft-js": "^0.11.7",
     "firebase": "^7.21.1",
+    "date-fns": "^2.0.0-beta.5",
     "formik": "^2.1.4",
     "history": "^4.10.1",
     "immer": "^6.0.3",

package.json

@@ -107,6 +107,15 @@ const renderRoutes = () => (
           </MainLayout>
         )}
       />
+      <Route
+        path="/workshops"
+        exact
+        render={props => (
+          <MainLayout>
+            <WorkshopView {...props} />
+          </MainLayout>
+        )}
+      />
 
       <Route
         path={`/machine-learning-using-python`}

src/Routes.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function Projects({ projects, flat }) {
+function Projects({ title, projects, flat }) {
   const classes = useStyles();
 
   return (
@@ -39,7 +39,7 @@ function Projects({ projects, flat }) {
               margin: '12px 0px 12px 8px'
             }}
           >
-            Learn To Make From this Course
+            {title}
           </Typography>
           {projects.map((project, index) => {
             return <Project project={project} />;

src/views/pages/Courses/partials/Projects.js renamed to src/components/SidePanel/Projects.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/constants/index.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/data/workshopData/workshopDetail.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: {
@@ -106,7 +106,10 @@ export default function Major({ course }) {
 
         <Hidden smDown>
           <Box display="flex" flexDirection="column" mb={3} ml={2}>
-            <Projects projects={course.projects} />
+            <Projects
+              title="Learn To Make From This Course"
+              projects={course.projects}
+            />
           </Box>
         </Hidden>
       </Box>

src/views/pages/Courses/Major.js

@@ -97,7 +97,7 @@ function CTA({ className, ...rest }) {
                     <Button
                       className={classes.Button + ' ' + classes.primeBtn}
                       component="a"
-                      href="https://codecau.se/ws"
+                      href="/workshops"
                       target="_blank"
                       size="large"
                       variant="contained"

src/views/pages/EventsView/CTA.js

@@ -97,7 +97,7 @@ function CTA({ className, ...rest }) {
                     <Button
                       className={classes.Button + ' ' + classes.primeBtn}
                       component="a"
-                      href="https://codecau.se/ws"
+                      href="/workshops"
                       target="_blank"
                       size="large"
                       variant="contained"