Implement GoBack component

.eslintrc.js

@@ -112,6 +112,7 @@ module.exports = {
         'react/jsx-indent-props': ['off'],
         'react/jsx-one-expression-per-line': ['off'],
         'react/jsx-no-target-blank': ['off'],
+        'react/jsx-curly-newline': ['off'],
         'react/no-array-index-key': ['off'],
         'react/react-in-jsx-scope': ['off'],
         'semi': ['off'],

components/ArrowLeftIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const ArrowLeftIcon = () => {
+    return (
+        <div className='ArrowLeftIcon'>
+            <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='inline w-6 h-6'>
+                <path strokeLinecap='round' strokeLinejoin='round' d='M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18' />
+            </svg>
+        </div>
+    )
+}
+
+export default ArrowLeftIcon

components/GoBack.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+
+import ArrowLeftIcon from './ArrowLeftIcon';
+import Headline from './Headline';
+
+import { 
+    GO_BACK,
+} from '../constants/strings';
+
+const GoBack = ({}) => {
+
+    const router = useRouter()
+
+    return (
+        <div className='GoBack' onClick={() => router.back()}>
+            <div className='grid grid-flow-col auto-cols-max'>
+                <div className=''>
+                    <ArrowLeftIcon />
+                </div>
+                <div className='ml-5 pb-1'>
+                    <Headline variant='alternative'>
+                        {` ${GO_BACK} `}
+                    </Headline>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default GoBack

components/layout.tsx

@@ -1,19 +1,37 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
+import { useRouter } from 'next/router'
 
 import Navbar from './Navbar'
 import Footer from './Footer'
+import Section from './Section'
+import GoBack from './GoBack'
 
 export default function Layout({ children }: any) {
-
+
+    const router = useRouter()
+
     const [openMobileNavbar, setOpenMobileNavbar] = useState(false)
 
+    const renderGoBack = () => {
+        if (!(router.pathname == '/' || router.pathname == '/projects')) {
+            return (
+                <Section color='light-gray' paddingBottom='pb-6' paddingTop='pt-6'>
+                    <GoBack />
+                </Section>
+            )
+        }    
+    }
+
     return (
         <div className={`Layout ${openMobileNavbar ? 'overflow-hidden h-screen' : ''}`}>
             <Navbar 
                 openMobileNavbar={openMobileNavbar}
                 setOpenMobileNavbar={setOpenMobileNavbar} 
             />
             <main className='content min-h-custom'>
+                <div className='md:hidden'>
+                    { renderGoBack() }
+                </div>
                 { children }
             </main>
             <Footer />

constants/strings.ts

@@ -57,6 +57,7 @@ export const HAVE_SOME_CAPITAL = 'Have some capital, but need to secure more fun
 export const PROJECT_IS_ALREADY_UP = 'Project is already up and running in production'
 export const STARTING_MY_PROJECT_FROM_SCRATCH = 'Starting my project from scratch'
 export const STARTED_DEVELOPMENT_BUT_NEED_ASSISTANCE = 'Started development but need more assistance'
+export const GO_BACK = 'Go back'
 export const INVALID = 'Invalid'
 export const PLEASE_GIVE_A_DESCRIPTION = 'Please give a brief description'
 export const FIELDS_WITH_ARE_REQUIRED = 'Fields with * are required'
@@ -72,4 +73,4 @@ export const MY_OWN_STARTUP_SMALL_BUSINESS: string = 'a startup / small business
 export const CORPORATION: string = 'a corporate client / large employer'
 export const NON_PROFIT_ORGANIZATION: string = 'a non-profit organization'
 export const PUBLIC_GOVERNMENT_AGENCY: string = 'a public service / government agency'
-export const OTHER: string = 'other'
+export const OTHER: string = 'other'