coderplex-org · vinaypuppal · Nov 1, 2017 · Oct 25, 2017 · Oct 25, 2017 · Oct 25, 2017
diff --git a/components/accord-guide.js b/components/accord-guide.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import fetch from 'isomorphic-unfetch';
+import marked from 'marked';
+import { Accordion, Icon, Loader } from 'semantic-ui-react';
+
+export default class AccordGuide extends Component {
+  constructor(props) {
+    super(props);
+    marked.setOptions({
+      renderer: new marked.Renderer(),
+      gfm: true,
+      tables: true,
+      breaks: true,
+      pedantic: false,
+      sanitize: true,
+      smartLists: true,
+      smartypants: false,
+    });
+    this.state = {
+      markdown: '',
+    };
+  }
+
+  async componentDidMount() {
+    try {
+      const request = await fetch(this.props.url);
+      const response = await request.text();
+      await this.setState({ markdown: response, loading: false });
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <main>
+          <Accordion fluid styled>
+            <Accordion.Title>
+              <Icon name="dropdown" />
+              {this.props.title}
+            </Accordion.Title>
+            <Accordion.Content>
+              {this.state.markdown === '' ? (
+                <Loader active inline="centered" />
+              ) : (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked(this.state.markdown),
+                  }}
+                />
+              )}
+            </Accordion.Content>
+          </Accordion>
+        </main>
+      </div>
+    );
+  }
+}
diff --git a/components/count-down.js b/components/count-down.js
diff --git a/components/global-styles.js b/components/global-styles.js
@@ -52,6 +52,86 @@ export default () => (
       .headroom--scrolled {
         z-index: 99999 !important;
       }
+      .learn_search {
+        padding-top: 40px;
+        padding-bottom: 40px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: center;
+      }
+      th {
+        background: #f4f6fb;
+        font-weight: bold;
+      }
+      td,
+      th {
+        padding: 6px;
+        border: 1px solid #ccc;
+        text-align: center;
+      }
+      @media only screen and (max-width: 760px),
+        (min-device-width: 768px) and (max-device-width: 1024px) {
+        table,
+        thead,
+        tbody,
+        th,
+        td,
+        tr {
+          display: block;
+          text-align: center;
+          margin-bottom: 10px;
+        }
+
+        thead tr {
+          position: absolute;
+          top: -9999px;
+          left: -9999px;
+        }
+
+        tr {
+          border: 1px solid #ccc;
+          text-align: center;
+        }
+
+        td {
+          border: none;
+          border-bottom: 1px solid #eee;
+          position: relative;
+          padding-left: 50%;
+        }
+
+        td:before {
+          position: absolute;
+          top: 6px;
+          left: 6px;
+          width: 30%;
+          padding-right: 5px;
+          white-space: normal;
+          font-size: 12px;
+          text-align: left;
+        }
+
+        td:nth-of-type(1):before {
+          content: 'Concept';
+        }
+        td:nth-of-type(1) {
+          background: #f4f6fb;
+        }
+        td:nth-of-type(2):before {
+          content: 'Best video';
+        }
+        td:nth-of-type(3):before {
+          content: 'Best text';
+        }
+        td:nth-of-type(4):before {
+          content: 'Duration';
+        }
+        td:nth-of-type(5):before {
+          content: 'Prereq';
+        }
+      }
     `}</style>
   </div>
 );
diff --git a/components/head.js b/components/head.js
@@ -41,6 +41,10 @@ export default ({ title }) => (
       rel="stylesheet"
       href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
+    />
     <title>{title}</title>
     <meta name="description" content="coderplex" />
     <meta property="og:type" content="website" />

diff --git a/components/marked-js.js b/components/marked-js.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import marked from 'marked';
+import { Loader } from 'semantic-ui-react';
+
+export default class MarkedJS extends React.Component {
+  constructor(props) {
+    super(props);
+    marked.setOptions({
+      renderer: new marked.Renderer(),
+      gfm: true,
+      tables: true,
+      breaks: false,
+      pedantic: false,
+      sanitize: true,
+      smartLists: true,
+      smartypants: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.loading ? (
+          <Loader active inline="centered" />
+        ) : (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: marked(this.props.markdown),
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+}