40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function LiveClock() {
|
|
const [time, setTime] = useState<Date | null>(null);
|
|
|
|
useEffect(() => {
|
|
setTime(new Date());
|
|
const timer = setInterval(() => setTime(new Date()), 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
if (!time) return null;
|
|
|
|
const dateStr = time.toLocaleDateString('es-CO', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
|
|
const timeStr = time.toLocaleTimeString('es-CO', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
});
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 h-full">
|
|
<span className="text-slate-300 text-[11px] hidden lg:block font-medium lowercase first-letter:uppercase">
|
|
{dateStr}
|
|
</span>
|
|
<span className="bg-slate-100 text-slate-900 px-2 py-1 rounded text-[11px] font-bold whitespace-nowrap shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)]">
|
|
{timeStr}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|