62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Box,
|
|
Heading,
|
|
Table,
|
|
Thead,
|
|
Tbody,
|
|
Tr,
|
|
Th,
|
|
Button,
|
|
useDisclosure,
|
|
Flex,
|
|
} from '@chakra-ui/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import MasterItem from '../MasterItem';
|
|
import MasterDrawer from '../MasterDrawer';
|
|
import data from '../../../stubs/json/arm-masters/success.json';
|
|
|
|
const TABLE_HEADERS = [
|
|
'name' as const,
|
|
'currentJob' as const,
|
|
'phone' as const,
|
|
'actions' as const,
|
|
];
|
|
|
|
const Masters = () => {
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.arm.master',
|
|
});
|
|
|
|
return (
|
|
<Box p='8'>
|
|
<Flex justifyContent='space-between' alignItems='center' mb='5'>
|
|
<Heading size='lg'> {t('title')}</Heading>
|
|
<Button colorScheme='green' onClick={onOpen}>
|
|
+ {t('add')}
|
|
</Button>
|
|
</Flex>
|
|
<Table variant='simple' colorScheme='blackAlpha'>
|
|
<Thead>
|
|
<Tr>
|
|
{TABLE_HEADERS.map((name) => (
|
|
<Th key={name}>{t(`table.header.${name}`)}</Th>
|
|
))}
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{data.body.map((master, index) => (
|
|
<MasterItem key={index} {...master} />
|
|
))}
|
|
</Tbody>
|
|
</Table>
|
|
<MasterDrawer isOpen={isOpen} onClose={onClose} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Masters;
|