29 lines
660 B
JavaScript
29 lines
660 B
JavaScript
import { useState, useEffect } from 'react';
|
|
import '../style/Clock.css';
|
|
|
|
function Clock() {
|
|
const [now, setNow] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => setNow(new Date()), 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const time = now.toLocaleTimeString('en-GB'); // HH:MM:SS
|
|
const date = now.toLocaleDateString('en-GB', {
|
|
weekday: 'short',
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
});
|
|
|
|
return (
|
|
<div className="clock-container">
|
|
<span className="clock-time">{time}</span>
|
|
<span className="clock-date">{date}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Clock;
|