dry-wash-pl/src/components/Orders/Orders.tsx

import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
import React from 'react';
import { ordersData } from '../../mocks';
import OrderItem from '../OrderItem';
import i18next from 'i18next';
const Orders = () => {
  const TABLE_HEADERS = [
    'carNumber',
    'washingTime',
    'orderDate',
    'status',
    'telephone',
    'location',
  ];
  return (
    <Box p='8'>
      <Heading size='lg' mb='5'>
        {i18next.t('dry-wash.arm.order.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>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {ordersData.map((order, index) => (
            <OrderItem key={index} {...order} />
          ))}
        </Tbody>
      </Table>
    </Box>
  );
};

export default Orders;