Merge pull request #47 from dev-asterix/dev

added more default options
dev-asterix · Jul 8, 2022 · fa0a5d4 · fa0a5d4 · vercel · Jul 8, 2022
2 parents aad3e7c + d079544
commit fa0a5d4
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 66 deletions.
diff --git a/components/DateFormatModal.tsx b/components/DateFormatModal.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import getCurrentTime from '../functions/timeNow';
 import { BiReset } from 'react-icons/bi';
+import { IoMdArrowDropdown } from 'react-icons/io';
 import { store } from '../store/store';
 
 /**
@@ -21,6 +22,7 @@ function DateFormatModal({ setFormatPickerSelected }: Props) {
   const defFormatString = "b d Y H:M:S Z (z)";
   const [formattedTime, setFormattedTime] = useState(getCurrentTime(Intl.DateTimeFormat().resolvedOptions().timeZone, store.getState().storedata.dateFormat));
   const [expandInstruction, setExpandInstruction] = useState(false);
+  const [dateFormat, setDateFormat] = useState('');
   const [formatString, setFormatString] = useState(
     store.getState().storedata.dateFormat.
       replaceAll(/%:/g, "").
@@ -87,7 +89,7 @@ function DateFormatModal({ setFormatPickerSelected }: Props) {
     // replace each character with % character
     formatInput.split('').forEach((char) => {
       if (![' ', '-', ':', '.', '/', '\\', '\'', '"', '(', ')', '[', ']', '{', '}', ';', '?', '>',
-        '<', '*', '&', '^', '%', '$', '#', '@', '!', '~', '`'].includes(char)) {
+        '<', '*', '&', '^', '%', '$', '#', '@', '!', '~', '`', ',', 'T'].includes(char)) {
 
         // find the format for this display from dateformaters
         const format = dateformaters.find((formatter) => formatter.display === char)?.format as string;
@@ -113,48 +115,91 @@ function DateFormatModal({ setFormatPickerSelected }: Props) {
           <div className="relative bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full">
             <div className="bg-slate-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
               <h3 className="text-2xl leading-6 font-medium text-teal-500 mb-2" id="modal-title">Date format modifier</h3>
-              <p className='text-gray-500 text-sm'>update the date time format to suit your choice!</p>
-              <button
-                className='text-teal-600 text-sm'
-                onClick={() => setExpandInstruction(!expandInstruction)}
-              >
-                click here for instructions
-              </button>
-              {expandInstruction && (
-                <>
-                  {/* table with timezone details */}
-                  <div className="table-responsive border rounded-lg border-gray-600 m-2 p-2">
-                    <table className="table-auto w-full">
-                      <tbody>
-                        {generateTH('Format')}
-                        {generateTH('Description')}
-                        {generateTH('Example')}
-                        {dateformaters.map((formatter) => generateTR(formatter.display, formatter.description, formatter.example))}
-                      </tbody>
-                    </table>
-                  </div>
-                </>)}
-            </div>
-
-            <div className="flex flex-col bg-slate-800 px-4 pb-4 sm:pb-4">
-              {/* add reset button inside input */}
-              <div className="flex items-center justify-between">
-                <div className="flex-1">
-                  <input
-                    type="text"
-                    className="block w-full bg-slate-600 opacity-50 focus:opacity-100 p-4 rounded-full text-white text-sm 
-                  leading-tight focus:outline-none focus:bg-slate-700 focus:text-white"
-                    placeholder="Enter date format"
-                    defaultValue={defFormatString}
-                    value={formatString}
-                    onChange={(e) => {
-                      let formatInput = e.target.value;
-                      setFormatString(formatInput);
-                    }}
-                  />
-                </div>
-                <BiReset size={24} color='gray' onClick={() => { setFormatString(defFormatString) }} className='cursor-pointer' />
+              <p className='text-gray-500 pl-5 text-sm'>update the date time format to suit your choice!</p>
+
+              <div className='flex justify-center'>
+                {/* add drop down icon */}
+                <select
+                  className='appearance-none p-2 px-2 m-2 bg-slate-600 focus:bg-slate-700 animate-pulse 
+                    focus:animate-none transition duration-1000 ease-in-out
+                    rounded-full w-full text-gray-300 focus:outline-none focus:shadow-outline'
+                  autoFocus
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    setDateFormat(val);
+                    if (val !== 'custom' && val !== '') {
+                      setFormatString(val);
+                    }
+                  }}
+                  value={dateFormat}
+                >
+                  <option value="">Choose a date-time format...</option>
+                  <option value="b d Y H:M:S Z (z)">b d Y H:M:S Z (z)</option>
+                  <option value="Y-m-d H:M:S Z">Y-m-d H:M:S Z</option>
+                  <option value="Y-m-d I:M:S p Z">Y-m-d I:M:S p Z</option>
+                  <option value="m/d/Y H:M:S Z">m/d/Y H:M:S Z</option>
+                  <option value="m/d/Y I:M:S p Z">m/d/Y I:M:S p Z</option>
+                  <option value="A, d B Y I:M:S Z">A, d B Y I:M:S Z</option>
+                  <option value="Y B d, A j">Y B d, A j</option>
+                  <option value="Y B d Z">Y B d Z</option>
+                  <option value="H:M:S Z">H:M:S Z</option>
+                  <option value="I:M:S p z">I:M:S p z</option>
+                  <option value="a, d b 'y I:M:S z">a, d b &apos;y I:M:S z</option>
+                  <option value="Y-m-dTH:M:Sz">Y-m-dTH:M:Sz</option>
+                  <option value="YmdHMSz">YmdHMSz</option>
+                  <option value="custom">Custom format...</option>
+                </select>
               </div>
+
+              {
+                dateFormat === 'custom' && (
+                  <>
+                    <button
+                      className='text-teal-600 pl-5 text-sm'
+                      onClick={() => setExpandInstruction(!expandInstruction)}
+                    >
+                      click here for instructions
+                    </button>
+
+                    {expandInstruction && (
+                      <>
+                        {/* table with timezone details */}
+                        <div className="table-responsive border rounded-lg border-gray-600 m-2 p-2">
+                          <table className="table-auto w-full">
+                            <tbody>
+                              {generateTH('Format')}
+                              {generateTH('Description')}
+                              {generateTH('Example')}
+                              {dateformaters.map((formatter) => generateTR(formatter.display, formatter.description, formatter.example))}
+                            </tbody>
+                          </table>
+                        </div>
+                      </>)}
+
+                    <div className="flex flex-col bg-slate-800 px-4 pb-4 sm:pb-4">
+                      {/* add reset button inside input */}
+                      <div className="flex items-center justify-between">
+                        <div className="flex-1">
+                          <input
+                            type="text"
+                            className="block w-full bg-slate-600 opacity-50 focus:opacity-100 p-4 rounded-full text-white text-sm 
+                              leading-tight focus:outline-none focus:bg-slate-700 focus:text-white"
+                            placeholder="Enter date format"
+                            defaultValue={defFormatString}
+                            value={formatString}
+                            onChange={(e) => {
+                              let formatInput = e.target.value;
+                              setFormatString(formatInput);
+                            }}
+                          />
+                        </div>
+                        <BiReset size={24} color='gray' onClick={() => { setFormatString(defFormatString) }} className='cursor-pointer' />
+                      </div>
+
+                    </div>
+                  </>
+                )
+              }
               <p className='text-teal-400 text-center py-2'>
                 {formattedTime}
               </p>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -37,11 +37,11 @@ const Footer = ({ hidden }: Props) => {
   return (
     <div className='flex flex-col justify-center text-center mt-10 mb-5 bg-slate-900'>
       <div className="flex flex-row justify-center">
-        {/* <div className='grid grid-cols-2 md:grid-cols-2 text-center p-5'>
-          {footerNav('the time is 🕟', '/', 'left')}
+        <div className='grid grid-cols-2 md:grid-cols-2 text-center p-5'>
+          {/* {footerNav('the time is 🕟', '/', 'left')}
           {footerNav('the time was? ⌚', '/TimeWas', 'left')}
-          {footerNav('make it better 🚀', 'https://github.com/dev-asterix/and-the-time-is', 'right')}
-        </div> */}
+          {footerNav('make it better 🚀', 'https://github.com/dev-asterix/and-the-time-is', 'right')} */}
+        </div>
       </div>
       <div className='text-red-800 font-semibold text-sm lg:text-md'>
         *Disclaimer: This is a demo app. Timezones and timestamps displayed here are not accurate yet. This is still work in progress.

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -28,12 +28,6 @@ const Navbar = () => {
     return () => clearInterval(interval);
   }, []);
 
-  // store.subscribe(() => {
-  //   setCurrentTime(
-  //     getCurrentTime(Intl.DateTimeFormat().resolvedOptions().timeZone, store.getState().storedata.dateFormat),
-  //   );
-  // });
-
   return (
     <>
       <div
@@ -43,7 +37,7 @@ const Navbar = () => {
         <div className="grid lg:grid-cols-2">
           <div className='p-2 lg:p-8 mt-2 lg:mt-10'>
             <Link href={"/"}>
-              <a className='text-4xl font-nova-flat md:text-6xl pb-2 hover:text-teal-500'>
+              <a className='text-4xl font-nova-flat md:text-6xl pb-2 animate-pulse hover:text-teal-500'>
                 And the time is ...
               </a>
             </Link>

diff --git a/components/TimezoneSearch.tsx b/components/TimezoneSearch.tsx
@@ -37,8 +37,8 @@ const TimezoneSearch = () => {
         </p>
         <input
           type="text"
-          className="h-14 w-full bg-slate-700 rounded-3xl px-5 pr-14 
-            shadow-[0px_50px_50px_-15px_rgba(0,0,0,0.6)] focus:outline-none sm:px-5"
+          className="h-14 w-full bg-slate-700 transition-colors duration-1000 rounded-3xl px-5 pr-14 
+            shadow-[0px_50px_50px_-15px_rgba(0,0,0,0.6)] focus:outline-none focus:bg-slate-800 sm:px-5"
           placeholder="Search for a timezone code / timezone location / city..."
           value={search}
           onChange={(e) => {
@@ -49,7 +49,7 @@ const TimezoneSearch = () => {
         {/* search entry drop down */}
         {data && (
           <div
-            className="w-full px-2 bg-slate-700 rounded-xl 
+            className="w-full px-2 bg-slate-800 rounded-xl 
             shadow-[0px_50px_50px_-15px_rgba(0,0,0,0.6)] max-h-72 scrollbar-thin
             scrollbar-thumb-gray-800 scrollbar-track-gray-700"
           >

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,18 +1,19 @@
 import '../styles/globals.css';
-
 import { Provider } from 'react-redux';
-
-import Footer from '../components/Footer';
-import Main from '../components/Main';
-import Navbar from '../components/Navbar';
 import { store } from '../store/store';
 
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
 function AndTheTimeIs({ Component, pageProps }: AppProps) {
   return (
-    <Provider store={store}>
-      <Component {...pageProps} />
-    </Provider >
+    <>
+      <Head >
+        <title>And the time is...</title>
+      </Head>
+      <Provider store={store}>
+        <Component {...pageProps} />
+      </Provider >
+    </>
   )
 }
 

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -10,7 +10,6 @@ class CustomHeaders extends Document {
     return (
       <Html>
         <Head>
-          <title>And the time is...</title>
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           <link rel="preconnect" href="https://fonts.gstatic.com" />
           <link href="https://fonts.googleapis.com/css2?family=Nova+Flat&display=swap" rel="stylesheet" />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -11,7 +11,7 @@ const Home: NextPage = () => {
         <Navbar />
         <Main />
       </div>
-      <Footer hidden="/TimeWas" />
+      <Footer hidden="/" />
     </div>
   );
 };