545469eae0
Created ClientDate component that renders dates client-only via useEffect to prevent server/client locale mismatches. Server renders with de-DE as default, client updates to user's locale. Applied to route detail (version dates) and route list (updated dates). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
15 lines
472 B
TypeScript
15 lines
472 B
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
/**
|
|
* Renders a date only on the client to avoid SSR hydration mismatches.
|
|
* Server renders empty, client fills in with user's locale.
|
|
*/
|
|
export function ClientDate({ iso }: { iso: string }) {
|
|
const [formatted, setFormatted] = useState(new Date(iso).toLocaleDateString("en-US"));
|
|
|
|
useEffect(() => {
|
|
setFormatted(new Date(iso).toLocaleDateString());
|
|
}, [iso]);
|
|
|
|
return <time dateTime={iso}>{formatted}</time>;
|
|
}
|