66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
||
import {
|
||
Button,
|
||
FormControl,
|
||
FormLabel,
|
||
Input,
|
||
Drawer,
|
||
DrawerBody,
|
||
DrawerCloseButton,
|
||
DrawerContent,
|
||
DrawerFooter,
|
||
DrawerHeader,
|
||
DrawerOverlay,
|
||
} from '@chakra-ui/react';
|
||
|
||
const MasterDrawer = ({ isOpen, onClose }) => {
|
||
const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
|
||
|
||
const handleSave = () => {
|
||
console.log(`Сохранение мастера: ${newMaster}`);
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
|
||
<DrawerOverlay />
|
||
<DrawerContent>
|
||
<DrawerCloseButton />
|
||
<DrawerHeader>Добавить нового мастера</DrawerHeader>
|
||
<DrawerBody>
|
||
<FormControl mb='4'>
|
||
<FormLabel>ФИО</FormLabel>
|
||
<Input
|
||
value={newMaster.name}
|
||
onChange={(e) =>
|
||
setNewMaster({ ...newMaster, name: e.target.value })
|
||
}
|
||
placeholder='Введите ФИО'
|
||
/>
|
||
</FormControl>
|
||
<FormControl>
|
||
<FormLabel>Номер телефона</FormLabel>
|
||
<Input
|
||
value={newMaster.phone}
|
||
onChange={(e) =>
|
||
setNewMaster({ ...newMaster, phone: e.target.value })
|
||
}
|
||
placeholder='Введите номер телефона'
|
||
/>
|
||
</FormControl>
|
||
</DrawerBody>
|
||
<DrawerFooter>
|
||
<Button colorScheme='teal' mr={3} onClick={handleSave}>
|
||
Сохранить
|
||
</Button>
|
||
<Button variant='ghost' onClick={onClose}>
|
||
Отменить
|
||
</Button>
|
||
</DrawerFooter>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
);
|
||
};
|
||
|
||
export default MasterDrawer;
|