-
Notifications
You must be signed in to change notification settings - Fork 5
/
Clock.jsx
66 lines (55 loc) · 1.81 KB
/
Clock.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
* 2022 Sergi S. - https://github.com/sergiss
*/
import React, { useEffect, useState } from 'react'
import { Number } from './Number'
import { Word } from './Word';
const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
export const Clock = ({h24=true}) => {
const [hour , setHour ] = useState(0);
const [minute, setMinute] = useState(0);
const [second, setSecond] = useState(0);
const [day , setDay ] = useState(0);
const [pm , setPm ] = useState(false);
useEffect(()=> {
const update = () => {
const date = new Date();
let hour = date.getHours();
if(!h24) {
hour = (hour % 12) || 12;
}
setHour(hour);
setMinute(date.getMinutes());
setSecond(date.getSeconds());
setDay(date.getDay());
setPm(date.getHours() >= 12);
}
update();
const interval = setInterval(()=> {
update();
}, 1000);
return ()=>clearInterval(interval);
}, []);
return (
<div className='clock'>
<div className='calendar'>
{
days.map((value, index)=>(<Word key={value} value={value} hidden={index != day}/>))
}
</div>
<div className='row'>
<div className='hour'>
<Number value={hour}/>
<Word value={':'} />
<Number value={minute}/>
<Word value={':'} />
<Number value={second}/>
</div>
<div className='ampm'>
<Word value={'AM'} hidden={ pm} />
<Word value={'PM'} hidden={!pm} />
</div>
</div>
</div>
)
}