feat: add multilingualism (#35)

src/components/Orders/Orders.tsx

@@ -1,36 +1,44 @@
 import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
-import i18next from 'i18next';
-
 import { ordersData } from '../../mocks';
 import OrderItem from '../OrderItem';
+import { useTranslation } from 'react-i18next';
+import { OrderProps } from '../OrderItem/OrderItem';
+
 const Orders = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.order',
+  });
+
   const TABLE_HEADERS = [
-    'carNumber',
-    'washingTime',
-    'orderDate',
-    'status',
-    'telephone',
-    'location',
+    'carNumber' as const,
+    'washingTime' as const,
+    'orderDate' as const,
+    'status' as const,
+    'telephone' as const,
+    'location' as const,
   ];
+
   return (
     <Box p='8'>
       <Heading size='lg' mb='5'>
-        {i18next.t('dry-wash.arm.order.title')}
+        {t('title')}
       </Heading>
       <Table variant='simple' colorScheme='blackAlpha'>
         <Thead>
           <Tr>
             {TABLE_HEADERS.map((name, key) => (
-              <Th key={key}>
-                {i18next.t(`dry-wash.arm.order.table.header.${name}`)}
-              </Th>
+              <Th key={key}>{t(`table.header.${name}`)}</Th>
             ))}
           </Tr>
         </Thead>
         <Tbody>
           {ordersData.map((order, index) => (
-            <OrderItem key={index} {...order} />
+            <OrderItem
+              key={index}
+              {...order}
+              status={order.status as OrderProps['status']}
+            />
           ))}
         </Tbody>
       </Table>