currentTime.js (1646B)
1 import React from 'react'; 2 import AutoCompleteText from './autoCompleteText'; 3 4 import useTime from './helpers/useTime'; 5 import prepData from './helpers/prepData'; 6 7 function CurrentTime() { 8 const [TZ2, setTZ2] = React.useState('UTC'); 9 const { firstAbbr, fmtTime1, fmtTime2, firstTZ, secondAbbr } = prepData( 10 useTime(), 11 TZ2 12 ); 13 return ( 14 <div className="time-conversion container" style={{ minHeight: '75vh' }}> 15 <div className="row mb-3" id="fromto"> 16 <div className="col text-right" id="labels-from"> 17 <h1>From</h1> 18 </div> 19 <div className="col text-left" id="labels-to"> 20 <h1>To</h1> 21 </div> 22 </div> 23 <div className="row mb-3" id="labels"> 24 <div className="col text-right" id="local-time-lbl-box"> 25 <h4 aria-level="4" id="local-time-lbl"> 26 Local time ({firstTZ}) 27 </h4> 28 </div> 29 <div className="col" id="converted-time-lbl-box"> 30 <AutoCompleteText 31 autofocus={true} 32 changeValue={setTZ2} 33 defaultValue={TZ2} 34 id="converted-time-lbl-input" 35 placeholder="Time zone" 36 /> 37 </div> 38 </div> 39 <div className="row" id="times"> 40 <div className="col text-right" id="local-time-box"> 41 <h4 aria-level="4" id="local-time"> 42 {fmtTime1} ({firstAbbr}) 43 </h4> 44 </div> 45 <div className="col" id="converted-time-box"> 46 <h4 aria-level="4" id="converted-time"> 47 {fmtTime2} ({secondAbbr}) 48 </h4> 49 </div> 50 </div> 51 </div> 52 ); 53 } 54 55 export default CurrentTime;