Implement User Profile Page with Display Name, Email, and Navigation Buttons

[AjithAkuthota23]

Create a new user profile page with the following components:

Top Display Section:

• Show the user's display name and email at the top.
• Include a close button (X) on the right side to exit the profile page.
• Navigation Buttons:

Add three navigation buttons under the display section:

• My Profile
• Settings
• Logout

Each button should switch to a respective section using state management.

My Profile Section:

• Display editable fields for:

  • User Image (should allow users to upload and change their profile image).
  • Name (editable text field).
  • Email (editable text field).
  • Phone Number (editable text field).
  • Location (editable text field).

• Settings Section:

  • Include Theme and Language dropdown menus for user preference settings.
  • Themes should include options like Light, Dark, and System Default.
  • Language dropdown should include at least English, Spanish, and French.

• Logout Button:

  • Create a fully functional logout button that clears the user session and redirects to the login page.

Acceptance Criteria:

• Top bar should display Name, Email, and a clickable X button to close the profile.
• Three navigation buttons (My Profile, Settings, Logout) should be displayed below the top bar.
• Buttons should visually indicate which section is currently active.

My Profile Section:

• User image should be displayed as a circular avatar with an Edit icon overlay for changing the image.
• Editable text fields for Name, Email, Phone Number, and Location should be pre-filled with the current user's data.
• Saving changes should trigger an API call to update the user’s information in the database.

Settings Section:

• Theme dropdown should allow users to select Light, Dark, or System Default.
• Language dropdown should support English, Spanish, and French.

Changing settings should update the theme or language immediately and persist the preferences for future sessions.

Logout Button:

• When clicked, the Logout button should clear the user's session data.
• The user should be redirected to the Login page.

Figma: https://www.figma.com/design/KrlSZ5JqS9mxvxjcVfh0Pn/User-profile-UI?node-id=0-1&t=UyVo1G6Lhg1ap8ox-1