60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
import { 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)
|
|
}, [h24])
|
|
|
|
return (
|
|
<div className='clock shadow border m-2 rounded-lg flex items-center flex-col overflow-hidden px-4 py-7'>
|
|
<div className='calendar flex gap-4 2xl:text-3xl text-xl mb-3'>
|
|
{days.map((value, index) => (
|
|
<Word key={value} value={value} hidden={index != day} />
|
|
))}
|
|
</div>
|
|
<div className='clock-row flex gap-4 items-center'>
|
|
<div className='hour 2xl:text-7xl text-5xl'>
|
|
<Number value={hour} />
|
|
<Word value={':'} />
|
|
<Number value={minute} />
|
|
<Word value={':'} />
|
|
<Number value={second} />
|
|
</div>
|
|
<div className='ampm 2xl:text-5xl text-4xl'>
|
|
<Word value={'AM'} hidden={pm} />
|
|
<Word value={'PM'} hidden={!pm} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|