Add dashboard and navigation translations with date-fns locale support
- 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>
This commit is contained in:
30
frontend/src/hooks/useDateFnsLocale.ts
Normal file
30
frontend/src/hooks/useDateFnsLocale.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user