43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import style from "./style.module.css";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
export default function Datetime() {
|
|
const locale = "de";
|
|
const [today, setDate] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setDate(new Date());
|
|
}, 20 * 1000);
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, []);
|
|
|
|
const date = today.toLocaleDateString(locale, {
|
|
month: "long",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
|
|
const hour = today.getHours().toString().padStart(2, "0");
|
|
const minute = today.getMinutes().toString().padStart(2, "0");
|
|
|
|
return (
|
|
<div className={style.container}>
|
|
<div className={style.icon}>
|
|
<img src="src/assets/clock.png" />
|
|
</div>
|
|
<div className={style.textContainer}>
|
|
<div className={style.time}>
|
|
{hour}
|
|
<span className={style.divider}>:</span>
|
|
{minute}
|
|
</div>
|
|
<div className={style.date}>{date}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|