40 lines
1018 B
TypeScript
40 lines
1018 B
TypeScript
import { useEffect, useState } from "react";
|
|
import { Link } from "react-router";
|
|
|
|
function getCurrentTime() {
|
|
return new Date().toLocaleString();
|
|
}
|
|
|
|
export function Header() {
|
|
const [currentTime, setCurrentTime] = useState('');
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentTime(getCurrentTime());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<header className="mb-8">
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<p className="text-sm text-slate-500">
|
|
<Link to="/">Crypto Dashboard</Link>
|
|
</p>
|
|
<h1 className="mt-1 text-2xl font-semibold tracking-tight sm:text-3xl">
|
|
Next Coins
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<div className="relative">
|
|
<p>{currentTime || '\u00A0'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|