- Add translations for all dashboard widgets (de, es, fr) - Add navigation menu translations for all languages - Create useDateFnsLocale hook for localized date formatting - Add translate="no" to prevent browser auto-translation - Update dashboard components to use translation keys 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
31 lines
795 B
TypeScript
31 lines
795 B
TypeScript
import { useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Locale } from 'date-fns';
|
|
import { enUS, de, es, fr } from 'date-fns/locale';
|
|
|
|
const localeMap: Record<string, Locale> = {
|
|
en: enUS,
|
|
de: de,
|
|
es: es,
|
|
fr: fr,
|
|
};
|
|
|
|
/**
|
|
* Hook to get the date-fns locale based on the current i18n language.
|
|
* Use this with date-fns functions that support locale, like formatDistanceToNow.
|
|
*
|
|
* @example
|
|
* const locale = useDateFnsLocale();
|
|
* formatDistanceToNow(date, { addSuffix: true, locale });
|
|
*/
|
|
export const useDateFnsLocale = (): Locale => {
|
|
const { i18n } = useTranslation();
|
|
|
|
return useMemo(() => {
|
|
const lang = i18n.language?.split('-')[0] || 'en';
|
|
return localeMap[lang] || enUS;
|
|
}, [i18n.language]);
|
|
};
|
|
|
|
export default useDateFnsLocale;
|