time-convertor-ts

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

SimpleConvertor.tsx (2116B)


      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   friendlyStr,
     10   getSavedZones,
     11   localTimezone,
     12   saveTimezones,
     13 } from "../../utils";
     14 
     15 import { HMSDMY } from "../../utils";
     16 
     17 import { ISimpleConvertor } from "../../utils/interfaces";
     18 
     19 function SimpleConvertor({ setTZ1, time, TZ1 }: ISimpleConvertor): JSX.Element {
     20   return (
     21     <main className="container">
     22       <h1 className="mb-5 text-center">
     23         Convert <em>current</em> time to other time zone.
     24       </h1>
     25       <div className="mb-3 row" id="labels">
     26         <div
     27           className="col text-right"
     28           id="first-time-lbl-box"
     29           style={{ cursor: "not-allowed" }}
     30         >
     31           <div className="h4">{friendlyStr(localTimezone)} (Local time)</div>
     32         </div>
     33         <div className="col" id="second-time-lbl-box">
     34           <TimezoneInput
     35             autofocus={true}
     36             changeValue={setTZ1}
     37             id="second-time-lbl"
     38             placeholder="Time zone"
     39             TZ={TZ1}
     40           />
     41         </div>
     42       </div>
     43       <div className="row" id="times">
     44         <div className="col text-right" id="first-time-box">
     45           <h4 id="first-time">
     46             {displayTime({ fmtStr: HMSDMY, time, timezone: localTimezone })}
     47           </h4>
     48         </div>
     49         <div className="col" id="second-time-box">
     50           <h4 id="second-time">
     51             {displayTime({ fmtStr: HMSDMY, time, timezone: TZ1 })}
     52           </h4>
     53         </div>
     54       </div>
     55       <div className="text-right mt-5">
     56         <button
     57           className="btn btn-success mr-3"
     58           onClick={() => saveTimezones([TZ1])}
     59           type="button"
     60         >
     61           Save timezone
     62         </button>
     63         <button
     64           className="btn btn-danger"
     65           disabled={getSavedZones().length === 0}
     66           onClick={clearTimezones}
     67           type="button"
     68         >
     69           Clear All
     70         </button>
     71       </div>
     72       <SavedTimezones time={time} />
     73     </main>
     74   );
     75 }
     76 
     77 export default SimpleConvertor;