Create a responsive Header component for the Event Management Modal that allows users to toggle between night and day themes and add new events via a modal.
Acceptance Criteria
Night/Day Mode Toggle
Implement a toggle feature to switch between night and day modes.
The background and text colors should change accordingly based on the selected mode.
Use icons for night and day modes (Moon and Sun).
Add Event Modal
Create a modal that opens when the "Plus" icon is clicked.
The modal should have the following fields:
Event Image: Allow users to upload an image with a preview.
Event Name: Text input for the name of the event.
Event Description: Textarea for the event details.
Event Date: Date picker for selecting the event date.
Event Time: Time picker for selecting the event time.
Event Place: Text input for entering the event location.
Participants: Number input for the expected number of participants.
Form Submission
On submitting the form, log the submission in the console and close the modal.
Ensure all fields are required and properly validated.
Styling
Use Tailwind CSS for styling.
Ensure the component is responsive and looks good on various screen sizes (mobile, tablet, desktop).
Code Quality
Follow React best practices for state management and component structure.
Write clear and concise comments explaining the code where necessary.
Ensure the code adheres to the project's coding standards.
Technical Details
Dependencies: Ant Design for modal and button components.
File Location: src/components/Header.tsx
Additional Notes
Ensure the icons are imported correctly from the assets folder.
Use TypeScript for type safety where applicable.
Create a responsive Header component for the Event Management Modal that allows users to toggle between night and day themes and add new events via a modal.
Acceptance Criteria Night/Day Mode Toggle
Implement a toggle feature to switch between night and day modes. The background and text colors should change accordingly based on the selected mode. Use icons for night and day modes (Moon and Sun). Add Event Modal
Create a modal that opens when the "Plus" icon is clicked. The modal should have the following fields: Event Image: Allow users to upload an image with a preview. Event Name: Text input for the name of the event. Event Description: Textarea for the event details. Event Date: Date picker for selecting the event date. Event Time: Time picker for selecting the event time. Event Place: Text input for entering the event location. Participants: Number input for the expected number of participants. Form Submission
On submitting the form, log the submission in the console and close the modal. Ensure all fields are required and properly validated. Styling
Use Tailwind CSS for styling. Ensure the component is responsive and looks good on various screen sizes (mobile, tablet, desktop). Code Quality
Follow React best practices for state management and component structure. Write clear and concise comments explaining the code where necessary. Ensure the code adheres to the project's coding standards. Technical Details Dependencies: Ant Design for modal and button components. File Location: src/components/Header.tsx Additional Notes Ensure the icons are imported correctly from the assets folder. Use TypeScript for type safety where applicable.
Checklist