feat: add i18next (#11)

src/components/Masters/Masters.tsx

@@ -14,6 +14,7 @@ import {
 import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterModal';
+import i18next from 'i18next';
 
 const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];
 
@@ -25,7 +26,7 @@ const Masters = () => {
       <Flex justifyContent='space-between' alignItems='center' mb='5'>
         <Heading size='lg'>Мастера</Heading>
         <Button colorScheme='green' onClick={onOpen}>
-          + Добавить
+          + {i18next.t('dry-wash.arm.masters.add')}
         </Button>
       </Flex>
       <Table variant='simple' colorScheme='blackAlpha'>

src/components/OrderItem/OrderItem.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];
 
 const OrderItem = ({
   carNumber,
@@ -22,11 +25,11 @@ const OrderItem = ({
           onChange={(e) => setStatus(e.target.value)}
           placeholder='Выберите статус'
         >
-          <option value='в ожидании'>в ожидании</option>
-          <option value='В процессе'>в процессе</option>
-          <option value='в работе'>в работе</option>
-          <option value='отменил'>отменил</option>
-          <option value='Завершено'>Завершено</option>
+          {statuses.map((status) => (
+            <option key={status} value={status}>
+              {i18next.t(`dry-wash.order.status.${status}`)}
+            </option>
+          ))}
         </Select>
       </Td>
       <Td>

src/index.tsx

@@ -1,19 +1,26 @@
- 
 /* eslint-disable react/display-name */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-
+import { i18nextReactInitConfig } from '@brojs/i18nextreactconfig';
 import App from './app';
+import i18next from 'i18next';
 
+i18next.t = i18next.t.bind(i18next);
+const i18nextPromise = i18nextReactInitConfig(i18next);
 export default () => <App />;
 
 let rootElement: ReactDOM.Root;
 
-export const mount = (Component, element = document.getElementById('app')) => {
+export const mount = async (
+  Component,
+  element = document.getElementById('app'),
+) => {
   const rootElement = ReactDOM.createRoot(element);
+  await i18nextPromise;
   rootElement.render(<Component />);
   if (module.hot) {
-    module.hot.accept('./app', () => {
+    module.hot.accept('./app', async () => {
+      await i18next.reloadResources();
       rootElement.render(<Component />);
     });
   }