39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
|
|
type ClientTimeProps = {
|
|
isoString: string
|
|
locale?: string
|
|
options?: Intl.DateTimeFormatOptions
|
|
fallback?: string
|
|
}
|
|
|
|
function formatTimestamp(
|
|
isoString: string,
|
|
locale?: string,
|
|
options?: Intl.DateTimeFormatOptions,
|
|
fallback?: string,
|
|
): { display: string; dateTime: string } {
|
|
if (!isoString) {
|
|
return { display: fallback ?? '--', dateTime: '' }
|
|
}
|
|
|
|
const date = new Date(isoString)
|
|
if (Number.isNaN(date.getTime())) {
|
|
return { display: fallback ?? isoString, dateTime: isoString }
|
|
}
|
|
|
|
const formatter = new Intl.DateTimeFormat(locale ?? undefined, options)
|
|
return { display: formatter.format(date), dateTime: date.toISOString() }
|
|
}
|
|
|
|
export default function ClientTime({ isoString, locale, options, fallback }: ClientTimeProps) {
|
|
const { display, dateTime } = useMemo(
|
|
() => formatTimestamp(isoString, locale, options, fallback),
|
|
[isoString, locale, options, fallback],
|
|
)
|
|
|
|
return <time dateTime={dateTime || undefined}>{display}</time>
|
|
}
|