Profile System - Copy this React, Tailwind Component to your project
Create-a-profile-button-on-the-right-side-of-the-header.-These-buttons-should-trigger-a-Modal-component.-The-Modal-should-include:-Sign-In-and-Sign-Up-Component:-Options-to-sign-in-and-Sign-Up-using-social-media-accounts.-A-form-for-manual-sign-in-and-Sign-Up-with-the-following-fields:-Name-(Name-required-for-Sign-Up-only).-Email-(required).-Phone-Number:-Includes-a-dropdown-for-country-code-with-flag-selection-(for-Sign-Up-only)-Password-and-Re-enter-Password-(for-Sign-Up-only).-Login-option.-Email,-Password,-login-and-Forget-Password-link:-Opens-a-secure-recovery-process.-All-fields-should-have-proper-validation.-Users-cannot-proceed-until-they-enter-correct-information.-For-invalid-inputs,-display-error-messages.-Behavior:-When-the-user-successfully-logs-in-or-signs-up,-close-the-Modal-window-and-replace-the-user's-profile-icon-buttons-in-the-header.-User-Profile-Button:-Clicking-on-the-profile-icon-opens-a-small,-responsive-pop-up-window-containing-the-following:-Name-(editable).-Email-(editable).-Phone-Number:(editable).-Change-Password:-A-secure-form-for-updating-the-password.-Delete-Account:-A-confirmation-prompt-before-account-deletion.-Theme-Toggle:-A-Dark-Mode-switch-to-dynamically-change-the-entire-UI-theme.-Ensure-the-design-is-compact,-user-friendly,-visually-appealing,-and-fully-responsive-across-different-screen-sizes.
