Styled Paper - Copy this React, Mui Component to your project
Design a user interface using ReactJS and Material UI (MUI) to collect and validate the following data structure: javascript Copy code { "certificateName": "string", "organization": "string", "issueMonth": 0, "issueYear": 0, "certificateUrl": "string", "description": "string" } Requirements: Certificate Name: Input field for certificate name. Validation: The field cannot be empty. Show an error message if left blank. Organization: Input field for the issuing organization. Validation: Optional, but should not contain excessive whitespace. Issue Date: Two dropdowns for issueMonth (1–12) and issueYear (current year to 5 years in the future). Validation: The selected month and year must represent a future date. Display an error if the selected date is not greater than the current date. Certificate URL: Input field for the URL. Validation: Must be a valid URL (e.g., starts with http:// or https://). Show a clear error message for invalid URLs. Description: Multi line text area for a brief description. Validation: The field cannot be empty. Additional Notes: Use MUI components such as TextField, Select, and MenuItem for input fields. Use MUI’s FormControl and FormHelperText for structured validation error messages. Include a Submit Button and disable it until all validations pass. Implement real time validation as users input data. Expected Design Features: Clean, modern layout with Material UI's grid system. Use MUI themes to style the interface with professional colors. Responsive design for desktop and mobile views. Example Validation Logic: Validate certificateName using simple if (!value.trim()). For issueMonth and issueYear, compare with the current month/year using JavaScript Date objects. Use a regex pattern for certificateUrl validation (e.g., /^(https?:\/\/)?([\w. ]+)+(:\d+)?(\/([\w/_.]*)?)?$/). Deliverables: Provide the full ReactJS component code. Include clear comments explaining the validation logic and MUI customization.
