✨ add back button to 404 page

heytulsiprasad · Sep 22, 2020 · be5878b · be5878b
1 parent ca5354d
commit be5878b
Showing 1 changed file with 35 additions and 8 deletions.
diff --git a/src/containers/FourOhFour.jsx b/src/containers/FourOhFour.jsx
@@ -27,13 +27,40 @@ const Child = styled.div`
   text-align: center;
 `;
 
-const FourOhFour = () => (
-  <Container>
-    <Child>
-      <h1>Four Oh Four</h1>
-      <h2>Seems like, you are lost just like me</h2>
-    </Child>
-  </Container>
-);
+const Back = styled.div`
+  margin-top: 1rem;
+  line-height: 25px;
+  color: #2d9cdb;
+  cursor: pointer;
+
+  .back-icon {
+    font-size: 15px;
+    margin-right: 2.5px;
+  }
+
+  .back-text {
+    text-decoration: none;
+    color: #2d9cdb;
+    font-size: 15px;
+  }
+`;
+
+const FourOhFour = (props) => {
+  const letsGoBack = () => props.history.goBack();
+
+  return (
+    <Container>
+      <Child>
+        <h1>Four Oh Four</h1>
+        <h2>Seems like, you are lost just like me</h2>
+        <Back>
+          <div className="back-text" onClick={letsGoBack}>
+            Back
+          </div>
+        </Back>
+      </Child>
+    </Container>
+  );
+};
 
 export default FourOhFour;