Add Tips component

Author: Sean Prashad

web/package.json

@@ -16,6 +16,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-icons": "^3.8.0",
+    "react-markdown": "^4.3.1",
     "react-scripts": "3.3.0",
     "react-scroll": "^1.7.15",
     "react-table": "^7.0.0-rc.15",

web/src/components/Table/styles.scss

@@ -1,4 +1,6 @@
 .table {
+  padding-top: 1rem;
+
   .row {
     justify-content: center;
   }

web/src/components/Tabs/index.js

@@ -12,6 +12,9 @@ import {
 import classnames from 'classnames';
 
 import Table from '../Table';
+import Tips from '../Tips';
+
+import './styles.scss';
 
 const Tabs = () => {
   const [activeTab, setActiveTab] = useState('1');
@@ -40,24 +43,28 @@ const Tabs = () => {
               toggle('2');
             }}
           >
-            Moar Tabs
+            Tips
           </NavLink>
         </NavItem>
       </Nav>
-      <TabContent activeTab={activeTab}>
-        <TabPane tabId="1">
-          <Row>
-            <Col>
-              <Table />
-            </Col>
-          </Row>
-        </TabPane>
-        <TabPane tabId="2">
-          <Row>
-            <Col>Tab pane 2</Col>
-          </Row>
-        </TabPane>
-      </TabContent>
+      <Container>
+        <TabContent activeTab={activeTab}>
+          <TabPane tabId="1">
+            <Row>
+              <Col>
+                <Table />
+              </Col>
+            </Row>
+          </TabPane>
+          <TabPane tabId="2">
+            <Row>
+              <Col>
+                <Tips />
+              </Col>
+            </Row>
+          </TabPane>
+        </TabContent>
+      </Container>
     </Container>
   );
 };

web/src/components/Tabs/styles.scss

@@ -0,0 +1,6 @@
+.tab-pane {
+  .active {
+    display: flex !important;
+    justify-content: center;
+  }
+}

web/src/components/Tips/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import './styles.scss';
+
+const Tips = () => {
+  const input = `
+  \`\`\`md
+If input array is sorted then
+    - Binary search
+    - Two pointers
+
+If asked for all permutations/subsets then
+    - Backtracking
+
+If given a tree then
+    - DFS
+    - BFS
+
+If given a graph then
+    - DFS
+    - BFS
+
+If given a linked list then
+    - Two pointers
+
+If recursion is banned then
+    - Stack
+
+If asked for maximum/minumum subarray/subset/options then
+    - Dynamic programming
+
+If asked for top/least K items then
+    - Heap
+
+If asked for common strings then
+    - Map
+    - Trie
+
+Else
+    - Map/Set for O(1) time & O(n) space
+    - Sort input for O(nlogn) time and O(1) space
+\`\`\``;
+
+  return <ReactMarkdown className="tips" source={input} />;
+};
+
+export default Tips;

web/src/components/Tips/styles.scss

@@ -0,0 +1,9 @@
+.tips {
+  text-align: center !important;
+
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}