Form Container - Copy this React, Tailwind Component to your project

Import React, { useState, useEffect } from 'react'; import { Button, TextField, Typography, Container, Box } from '@mui/material'; import Swal from 'sweetalert2'; // Import SweetAlert import { useNavigate } from 'react router dom'; // import '../styles/AddTypeForm.css'; // Optional custom CSS import apiConfig from '../api/axiosConfig'; import { toast } from 'react toastify'; const AddTypeForm = ({ type, onCancel }) => { const [formData, setFormData] = useState({ name: '', description: '', }); const navigate = useNavigate(); useEffect(() => { if (type) { setFormData({ name: type.name || '', description: type.description || '', }); } }, [type]); const handleInputChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value, }); }; const handleSave = async () => { const token = sessionStorage.getItem('token'); // Validation to check if the fields are filled if (!formData.name || !formData.description) { Swal.fire({ text: 'Vui lòng nhập đầy đủ thông tin nhóm sản phẩm và mô tả.', timer: 2000, position: 'top right', // Position in the top right corner toast: true, // Makes it slide in like a toast notification showConfirmButton: false, // No confirm button needed }); return; // Stop execution if fields are empty } try { // API request to create the category const { data } = await apiConfig.post( '/api/category/create category', formData, { headers: { Authorization: `Bearer ${token}`, }, } ); if (data) { setTimeout(() => { toast.success(data); }, 1000); } onCancel(); // Close the modal // setTimeout(() => { // navigate('/unit', { replace: true }); // Navigate to /type after 2 seconds // window.location.reload(); // Force page reload to reflect the newly added category // }, 500); } catch (error) { // Close the form before showing the error notification onCancel(); // Close the modal first setTimeout(() => { // Show error notification after form disappears Swal.fire({ text: 'Không thể tạo nhóm sản phẩm, vui lòng thử lại.', position: 'top right', toast: true, timer: 2000, showConfirmButton: false, }).then(() => { navigate('/type'); }); }, 300); } }; return ( <Container maxWidth='sm'> <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#e9edf5', padding: '50px', borderRadius: '10px', boxShadow: '0 8px 19px rgba(0, 0, 0, 0.15)', marginTop: ' 40px', marginBottom: ' 40px', width: '500px', marginLeft: '10px', marginTop: '150px', }} > <Typography component='h1' variant='h6' style={{ marginBottom: '20px', color: '#022742' }} > {type ? 'Sửa nhóm sản phẩm' : 'Thêm nhóm sản phẩm'} </Typography> <TextField variant='outlined' margin='normal' fullWidth id='name' label='Nhóm sản phẩm' name='name' value={formData.name} onChange={handleInputChange} autoComplete='name' autoFocus sx={{ backgroundColor: 'white', '& .MuiInputBase input': { color: '#022742' }, }} InputLabelProps={{ style: { color: '#022742' }, }} /> <TextField variant='outlined' margin='normal' fullWidth id='description' label='Mô tả' name='description' value={formData.description} onChange={handleInputChange} multiline rows={4} sx={{ backgroundColor: 'white', '& .MuiInputBase input': { color: '#022742' }, }} InputLabelProps={{ style: { color: '#022742' }, }} /> <Box sx={{ display: 'flex', justifyContent: 'space between', width: '100%', marginTop: '20px', }} > <Button fullWidth variant='contained' sx={{ marginRight: '10px', backgroundColor: '#09446D', color: 'white', width: '10px', marginLeft: '180px', '&:hover': { backgroundColor: '#022742' }, }} onClick={handleSave} > Lưu </Button> <Button fullWidth variant='outlined' sx={{ backgroundColor: '#09446D', color: 'white', borderColor: '#09446D', marginRight: '180px', width: '10px', '&:hover': { backgroundColor: '#072f4d', borderColor: '#072f4d', }, }} onClick={onCancel} > Hủy </Button> </Box> </Box> </Container> ); }; export default AddTypeForm;