ramvignesh-b
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
interface DateDisplayProps {
|
|
date?: Date;
|
|
className?: string;
|
|
}
|
|
|
|
export default function DateDisplay({
|
|
date = new Date(),
|
|
className = "",
|
|
}: DateDisplayProps) {
|
|
const formattedDate = date.toLocaleDateString("en-US", {
|
|
month: "long",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
|
|
const [now, setNow] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setNow(new Date());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const hours = now.getHours();
|
|
const minutes = now.getMinutes();
|
|
const seconds = now.getSeconds();
|
|
|
|
return (
|
|
<div className={`text-right flex flex-col gap-2 min-w-35 ${className}`}>
|
|
<span className="text-xxs uppercase tracking-widester text-accent font-bold">
|
|
Date
|
|
</span>
|
|
<span className="text-sm font-serif text-secondary-content italic whitespace-nowrap">
|
|
{formattedDate} <br />
|
|
<span className="text-secondary-content/50 font-sans not-italic">
|
|
{hours}:{minutes}:{seconds}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|