time-convertor-ts

Convert time across timezones (typescript)
git clone http://git.hanabi.in/repos/time-convertor-ts.git
Log | Files | Refs | README | LICENSE

DualConvertor.tsx (2134B)

      1 import React from "react";
      2 
      3 import SavedTimezones from "../comps/SavedTimezones";
      4 import TimezoneInput from "../comps/TimezoneInput";
      5 
      6 import {
      7   clearTimezones,
      8   displayTime,
      9   getSavedZones,
     10   saveTimezones,
     11 } from "../../utils";
     12 
     13 import { HMSDMY } from "../../utils";
     14 
     15 import { IDualConvertor } from "../../utils/interfaces";
     16 
     17 function DualConvertor({
     18   time,
     19   TZ1,
     20   TZ2,
     21   setTZ1,
     22   setTZ2,
     23 }: IDualConvertor): JSX.Element {
     24   return (
     25     <main className="container">
     26       <h3 className="mb-5 text-center">
     27         Convert <em>current</em> time across time zones.
     28       </h3>
     29       <div className="mb-3 row" id="labels">
     30         <div className="col text-right" id="first-time-lbl-box">
     31           <TimezoneInput
     32             autofocus={true}
     33             changeValue={setTZ1}
     34             id="first-time-lbl"
     35             placeholder="Time zone"
     36             TZ={TZ1}
     37           />
     38         </div>
     39         <div className="col" id="second-time-lbl-box">
     40           <TimezoneInput
     41             autofocus={false}
     42             changeValue={setTZ2}
     43             id="second-time-lbl"
     44             placeholder="Time zone"
     45             TZ={TZ2}
     46           />
     47         </div>
     48       </div>
     49       <div className="row" id="times">
     50         <div className="col text-right" id="first-time-box">
     51           <h4 id="first-time">
     52             {displayTime({ fmtStr: HMSDMY, time, timezone: TZ1 })}
     53           </h4>
     54         </div>
     55         <div className="col" id="second-time-box">
     56           <h4 id="second-time">
     57             {displayTime({ fmtStr: HMSDMY, time, timezone: TZ2 })}
     58           </h4>
     59         </div>
     60       </div>
     61       <div className="text-right mt-5">
     62         <button
     63           className="btn btn-success mr-3"
     64           type="button"
     65           onClick={() => saveTimezones([TZ1, TZ2])}
     66         >
     67           Save timezones
     68         </button>
     69         <button
     70           className="btn btn-danger"
     71           disabled={getSavedZones().length === 0}
     72           type="button"
     73           onClick={clearTimezones}
     74         >
     75           Clear All
     76         </button>
     77       </div>
     78       <SavedTimezones time={time} />
     79     </main>
     80   );
     81 }
     82 
     83 export default DualConvertor;