Build Edit Profile Modal for Creator Dashboard #79
Description
Description
Implement the Edit Profile modal that allows creators to update their personal information.
This modal opens when the user clicks the Edit button on the Profile page.
The modal should allow the creator to update their profile picture, name, title, and bio.
Use mock data for now. No backend integration is required.
Modal Sections
1. Profile Image
Display the creator's profile avatar at the top.
Requirements:
- Show circular avatar
- Support image upload or placeholder
- Image preview should update when changed
2. Name Field
Input field for creator name.
Label:
Enter name
Example value:
Miss Flora Osatuyi
3. Title Field
Input field for the creator’s professional title.
Label:
Enter title
Example value:
Product Designer
4. About Section
This section displays the creator bio.
Requirements:
- Multiline text content
- Editable text area
- Include an Edit icon
- Include an Add (+) icon for expanding the section
Example content:
Flora is a talented product designer with 3+ years of experience creating functional, visually polished designs.
5. Save Button
Add a Save button at the bottom of the modal.
Requirements:
- The button should close the modal after saving (mock behavior)
- No backend required
Implementation Notes
Create reusable components where necessary:
EditProfileModalProfileImageUploaderProfileFormFields
Use mock state for form inputs.
Acceptance Criteria
- Modal opens from the Edit button
- Avatar is displayed and editable
- Name and title inputs work correctly
- About section supports multiline text
- The save button closes the modal.
- Layout is responsive
PR Requirements
- Include screenshots (desktop view)
- Ensure clean component structure
- Reference the issue in the PR description
Example:
Closes #XX