feat(DEV-13): create OfflineHeader with offlineResults

src/components/OfflineResults/index.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { getCachedGithubUsers } from './fetchFromCache';
 import { GithubUser } from '../../../types';
+import AppShell from '../AppShell';
+import Offline from '../../icons/offline.svg';
+import styles from './offlineResults.module.css';
 
 export const OfflineResults = () => {
   const [cachedResponses, setCachedResponses] = useState<GithubUser[]>([]);
@@ -10,11 +13,30 @@ export const OfflineResults = () => {
   }, [getCachedGithubUsers, setCachedResponses]);
 
   return (
-    <div>
-      Your Offline results
-      {cachedResponses.map(r => {
-        return <pre key={r.login}>{JSON.stringify(r)}</pre>;
-      })}
+    <AppShell>
+      <OfflineHeader />
+      <div>
+        Your Offline results
+        {cachedResponses.map(r => {
+          return <pre key={r.login}>{r.name}</pre>;
+        })}
+      </div>
+    </AppShell>
+  );
+};
+
+const OfflineHeader = () => {
+  return (
+    <div className={styles.offlineHeader}>
+      <Offline style={{ height: 40, width: 'auto' }} />
+
+      <p>You are currently offline</p>
+      <button
+        className={styles.refresh}
+        onClick={() => window.location.reload()}
+      >
+        refresh
+      </button>
     </div>
   );
 };

src/components/OfflineResults/offlineResults.module.css

@@ -0,0 +1,27 @@
+.offlineHeader {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 10px;
+    background: #FFEEB0;
+}
+
+.offlineHeader > p {
+    margin: 0;
+}
+
+.offlineIconContainer {
+    height: 10px;
+    width: auto;
+    border: 1px solid black
+}
+
+.refresh {
+    background: #000000;
+    color: #ffffff;
+    border: 0;
+    padding: 10px 15px;
+    border-radius: 4px;
+    font-weight: bold;
+    cursor: pointer;
+}

src/index.tsx

@@ -6,7 +6,7 @@ import '@fontsource/poppins/900.css';
 import { registerServiceWorker } from './utilities';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { ContentContainer } from './containers/ContentContainer';
-import { EmptyCard } from './components/EmptyCard';
+import { OfflineResults } from './components/OfflineResults';
 
 // todo (h2): update this condition
 if (true || process.env.NODE_ENV === 'production') {
@@ -18,7 +18,7 @@ const Root = () => (
   <Router>
     <Switch>
       <Route path='/' exact component={ContentContainer} />
-      <Route path='/offline' exact component={EmptyCard} />
+      <Route path='/offline' exact component={OfflineResults} />
     </Switch>
   </Router>
 );