71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
Button,
|
|
FormControl,
|
|
FormLabel,
|
|
Input,
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerCloseButton,
|
|
DrawerContent,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerOverlay,
|
|
} from '@chakra-ui/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const MasterDrawer = ({ isOpen, onClose }) => {
|
|
const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
|
|
|
|
const handleSave = () => {
|
|
console.log(`Сохранение мастера: ${newMaster}`);
|
|
onClose();
|
|
};
|
|
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.arm.master.drawer',
|
|
});
|
|
|
|
return (
|
|
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
|
|
<DrawerOverlay />
|
|
<DrawerContent>
|
|
<DrawerCloseButton />
|
|
<DrawerHeader>{t('title')}</DrawerHeader>
|
|
<DrawerBody>
|
|
<FormControl mb='4'>
|
|
<FormLabel>{t('inputName.label')}</FormLabel>
|
|
<Input
|
|
value={newMaster.name}
|
|
onChange={(e) =>
|
|
setNewMaster({ ...newMaster, name: e.target.value })
|
|
}
|
|
placeholder={t('inputName.placeholder')}
|
|
/>
|
|
</FormControl>
|
|
<FormControl>
|
|
<FormLabel> {t('inputPhone.label')}</FormLabel>
|
|
<Input
|
|
value={newMaster.phone}
|
|
onChange={(e) =>
|
|
setNewMaster({ ...newMaster, phone: e.target.value })
|
|
}
|
|
placeholder={t('inputPhone.placeholder')}
|
|
/>
|
|
</FormControl>
|
|
</DrawerBody>
|
|
<DrawerFooter>
|
|
<Button colorScheme='teal' mr={3} onClick={handleSave}>
|
|
{t('button.save')}
|
|
</Button>
|
|
<Button variant='ghost' onClick={onClose}>
|
|
{t('button.cancel')}
|
|
</Button>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default MasterDrawer;
|