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;