time-convertor-ts

commit 165c4a8301e9e2bbb0ed1cc4e02914134b4d4f14
parent f5f19249ef05738b4b97c7a237127bdaed84c86a
Author: Agastya Chandrakant <acagastya@outlook.com>
Date:   Mon, 25 May 2020 15:15:45 +0530

add bp of help, shadow for dropdown, basic routing

Diffstat:
M
src/App/comps/TimezoneInput.tsx
 | 
11
+++++++++--
M
src/App/index.tsx
 | 
37
+++++++++++++++++++++++++++++--------
A
src/App/pages/Help.tsx
 | 
7
+++++++

3 files changed, 45 insertions(+), 10 deletions(-)
diff --git a/src/App/comps/TimezoneInput.tsx b/src/App/comps/TimezoneInput.tsx
@@ -31,11 +31,14 @@ function TimezoneInput({
   function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
     const { value } = e.target;
     setInputValue(value);
+
     let recommendations: string[] | [] = [];
     if (value.length) {
       recommendations = options.filter((option) =>
         option.toLowerCase().includes(value.toLowerCase())
       );
+    } else {
+      recommendations = [...options];
     }
     setSuggestions(recommendations);
   }
@@ -87,8 +90,12 @@ function TimezoneInput({
       <div
         className="suggestion-list"
         style={{
-          maxHeight: '50vh',
+          boxShadow:
+            suggestions.length > 0
+              ? '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)'
+              : 'none',
           left: '15px',
+          maxHeight: '50vh',
           overflow: 'scroll',
           position: 'absolute',
           right: '15px',
@@ -96,7 +103,7 @@ function TimezoneInput({
           zIndex: 2,
         }}
       >
-        <div className="h6">
+        <div className="h6 mb-0">
           <ul className="list-group">
             {
               // @ts-ignore
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
 
 import DualConvertor from './pages/DualConvertor';
+import Help from './pages/Help';
 import SimpleConvertor from './pages/SimpleConvertor';
 
 import Footer from './comps/Footer';
@@ -17,14 +19,33 @@ function App<never>(): JSX.Element {
   return (
     <div className="container-fluid">
       <Header />
-      <DualConvertor
-        time={now}
-        TZ1={timezone2}
-        TZ2={timezone1}
-        setTZ1={setTimezone2}
-        setTZ2={setTimezone1}
-      />
-      {/* <SimpleConvertor time={now} TZ1={timezone1} setTZ1={setTimezone1} /> */}
+      <Router>
+        <Switch>
+          <Route
+            path="/from-to"
+            render={() => (
+              <DualConvertor
+                setTZ1={setTimezone2}
+                setTZ2={setTimezone1}
+                time={now}
+                TZ1={timezone2}
+                TZ2={timezone1}
+              />
+            )}
+          />
+          <Route component={Help} path="/help" />
+          <Route
+            path="/"
+            render={() => (
+              <SimpleConvertor
+                setTZ1={setTimezone1}
+                time={now}
+                TZ1={timezone1}
+              />
+            )}
+          />
+        </Switch>
+      </Router>
       <Footer />
     </div>
   );
diff --git a/src/App/pages/Help.tsx b/src/App/pages/Help.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Help<never>(): JSX.Element {
+  return <div className="container">This is help</div>;
+}
+
+export default Help;