Feat: Add resources page.

src/App.js

@@ -10,6 +10,7 @@ import useDarkMode from 'use-dark-mode';
 const Home = lazy(() => retry(() => import('./components/Home')));
 const About = lazy(() => retry(() => import('./components/About')));
 const State = lazy(() => retry(() => import('./components/State')));
+const Resources = lazy(() => retry(() => import('./components/Resources')));
 const LanguageSwitcher = lazy(() =>
   retry(() => import('./components/LanguageSwitcher'))
 );
@@ -38,6 +39,12 @@ const App = () => {
       displayName: 'About',
       showInNavbar: true,
     },
+    {
+      pageLink: '/resources',
+      view: Resources,
+      displayName: 'Resources',
+      showInNavbar: true,
+    },
     {
       pageLink: '/state/:stateCode',
       view: State,

src/App.scss

@@ -4113,7 +4113,7 @@ footer {
   align-items: center;
   align-self: center;
   animation-delay: 750ms;
-  background: #ff0000;
+  background: #f00;
   background: $pink-light;
   border-radius: 5px;
   color: $pink;
@@ -4132,6 +4132,64 @@ footer {
   }
 }
 
+.Resources {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 4rem;
+  margin-top: 2rem;
+  min-height: 100vh;
+
+  .heading {
+    color: $dark;
+    font-size: 17.5px;
+    margin-bottom: 2rem;
+  }
+
+  .banner {
+    background: $blue-light;
+    color: $blue;
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    width: 30rem;
+  }
+
+  .resources {
+    display: flex;
+    flex-direction: column;
+    width: 30rem;
+
+    .resource {
+      border-radius: 0.25rem;
+      padding: 1rem;
+      text-decoration: none;
+      width: 100%;
+
+      .link {
+        color: $blue;
+        font-size: 14px;
+        margin: 0;
+        width: 100%;
+        word-wrap: break-word;
+      }
+
+      .title {
+        color: $dark;
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 0.25rem;
+      }
+
+      &:hover {
+        background: $gray-hover;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
 @media (min-width: 769px) {
   .Home,
   .State {
@@ -4545,7 +4603,22 @@ footer {
 
   .essentials {
     margin-top: 0;
+  }
 
+  .Resources {
+    margin-top: 1rem;
+
+    .banner {
+      width: calc(100% - 5rem);
+    }
+
+    .resources {
+      width: calc(100% - 5rem);
+
+      .resource {
+        width: calc(100% - 2rem);
+      }
+    }
   }
 }
 

src/components/Home.js

@@ -125,11 +125,7 @@ function Home() {
             </>
           </div>
 
-          <a
-            href="https://life.coronasafe.network"
-            target="_noblank"
-            className="essentials fadeInUp"
-          >
+          <a href="/resources" className="essentials fadeInUp">
             <HeartIcon />
             Crowdsourced Resources
           </a>

src/components/Navbar.js

@@ -7,7 +7,7 @@ import {
 import locales from '../i18n/locales.json';
 
 import {useState, useCallback, useRef} from 'react';
-import {Book, HelpCircle, Home, Moon, Sun} from 'react-feather';
+import {Book, HelpCircle, Home, Moon, Sun, Phone} from 'react-feather';
 import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
 import {useTransition, animated} from 'react-spring';
@@ -92,6 +92,11 @@ function Navbar({
                 <HelpCircle {...activeNavIcon('/about')} />
               </span>
             </Link>
+            <Link to="/resources">
+              <span>
+                <Phone {...activeNavIcon('/resources')} />
+              </span>
+            </Link>
             <span>
               <SunMoon {...{darkMode}} />
             </span>

src/components/Resources.js

@@ -0,0 +1,51 @@
+import {fetcher} from '../utils/commonFunctions';
+
+import {LinkExternalIcon} from '@primer/octicons-react';
+import {useMemo} from 'react';
+import useSWR from 'swr';
+
+const Resources = () => {
+  const {data} = useSWR(
+    'https://api.covid19india.org/crowdsourced_resources_links.json',
+    fetcher
+  );
+
+  const resources = useMemo(() => {
+    if (!data) return [];
+    else return data.crowdsourcd_resources_links;
+  }, [data]);
+
+  console.log(resources);
+
+  return (
+    <div className="Resources">
+      <h1 className="heading">Resources</h1>
+
+      <div className="banner">
+        The links below are of independent and governmental aggregators who are
+        providing resources to those in need. A lot of this is dynamically
+        changing and might get outdated soon.
+      </div>
+
+      <div className="resources">
+        {resources
+          .filter((resource) => resource.shoulddisplay === 'Yes')
+          .map((resource, index) => (
+            <a
+              key={index}
+              href={resource.link}
+              target="_noblank"
+              className="resource"
+            >
+              <div className="title">
+                {resource.description || 'Independent Aggregator'}
+              </div>
+              <div className="link">{resource.link}</div>
+            </a>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default Resources;