38ada3bd4f
Add detectLocale() that extracts the full locale tag (e.g. "de-DE") from the request, not just the language. The journal root loader passes it via LocaleContext so ClientDate renders with the correct locale on both server and client — no more hardcoded "en-US" fallback. Also fixes settings page hydration mismatch by using ClientDate for passkey creation dates instead of inline toLocaleDateString(). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
20 lines
586 B
TypeScript
20 lines
586 B
TypeScript
import { useState, useEffect } from "react";
|
|
import { useLocale } from "./LocaleContext";
|
|
|
|
/**
|
|
* Renders a date using the server-detected locale for the initial render
|
|
* (matching SSR output), then updates to the browser's native locale
|
|
* after hydration.
|
|
*/
|
|
export function ClientDate({ iso }: { iso: string }) {
|
|
const locale = useLocale();
|
|
const [formatted, setFormatted] = useState(
|
|
new Date(iso).toLocaleDateString(locale),
|
|
);
|
|
|
|
useEffect(() => {
|
|
setFormatted(new Date(iso).toLocaleDateString());
|
|
}, [iso]);
|
|
|
|
return <time dateTime={iso}>{formatted}</time>;
|
|
}
|