41 lines
922 B
TypeScript
41 lines
922 B
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { ClockIcon } from "lucide-react"
|
|
|
|
export default function CurrentTime() {
|
|
const [currentTime, setCurrentTime] = useState(new Date())
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date())
|
|
}, 1000)
|
|
|
|
return () => {
|
|
clearInterval(timer)
|
|
}
|
|
}, [])
|
|
|
|
const formatDate = (date: Date) => {
|
|
const options: Intl.DateTimeFormatOptions = {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
hour12: false,
|
|
}
|
|
return date.toLocaleDateString("zh-CN", options)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-end text-slate-400 opacity-50">
|
|
<ClockIcon className="w-4 h-4 mr-2" />
|
|
<span className="text-sm">{formatDate(currentTime)}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { CurrentTime }
|