fix: month rendering (#560)

Author: yoannfleurydev

src/components/MonthPicker/Content.tsx

@@ -5,6 +5,7 @@ import {
   GridProps,
   HTMLChakraProps,
 } from '@chakra-ui/react';
+import { t } from 'i18next';
 
 import { MonthCaption } from './MonthCaption';
 import { useMonthPickerContext } from './MonthPickerContext';
@@ -75,7 +76,7 @@ export const Content: React.FC<React.PropsWithChildren<ContentProps>> = () => {
             {...(isSelected(monthAsDate) ? selectedStyle : {})}
             {...(isToday(monthAsDate) ? todayStyle : {})}
           >
-            {month}
+            {t(month)}
           </Button>
         );
       })}

src/components/MonthPicker/months.ts

@@ -1,18 +1,16 @@
-import { t } from 'i18next';
-
 const months = [
-  t('components:monthPicker.months.january'),
-  t('components:monthPicker.months.february'),
-  t('components:monthPicker.months.march'),
-  t('components:monthPicker.months.april'),
-  t('components:monthPicker.months.may'),
-  t('components:monthPicker.months.june'),
-  t('components:monthPicker.months.july'),
-  t('components:monthPicker.months.august'),
-  t('components:monthPicker.months.september'),
-  t('components:monthPicker.months.october'),
-  t('components:monthPicker.months.november'),
-  t('components:monthPicker.months.december'),
-];
+  'components:monthPicker.months.january',
+  'components:monthPicker.months.february',
+  'components:monthPicker.months.march',
+  'components:monthPicker.months.april',
+  'components:monthPicker.months.may',
+  'components:monthPicker.months.june',
+  'components:monthPicker.months.july',
+  'components:monthPicker.months.august',
+  'components:monthPicker.months.september',
+  'components:monthPicker.months.october',
+  'components:monthPicker.months.november',
+  'components:monthPicker.months.december',
+] as const;
 
 export default months;