Styled Container - Copy this React, Mui Component to your project

design-a-stylish-and-beautiful-profile-page-use-aos-for-admin-panel,-it-will-show-caregiver-image,-name,-phone-number,-email,-password,-,-category,-education,-experience,-nationality,-languages,-date_time_preference_to_work,-about,-gender,-available-(will-be-yes-or-no),-fees,-address-(is-object-have-line1-and-line2),-rating,-is_booked,-dob,-date,-vetting_status,-status-then-we-have-edit-profile-button-we-can-edit-phone-number,languages,-date_time_preference_to_work,expereinece,-about,-gender,-available-(will-a-toggle-button),-fees,-address-(is-object-have-line1-and-line2),,-dob-and-use-color-#CE257A-and-these-is-my-code-i-was-using-before-/*-eslint-disable-no-unused-vars-*/-import-React,-{-useContext,-useEffect,-useState-}-from-"react";-import-{-CareGiverContext-}-from-"../../context/CareGiverContext";-import-{-AppContext-}-from-"../../context/AppContext";-import-{-toast-}-from-"react-toastify";-import-axios-from-"axios";-const-CareGiverProfile-=-()-=>-{-const-{-cToken,-profileData,-setProfileData,-getProfileData-}-=-useContext(CareGiverContext);-const-{-currency,-backendUrl-}-=-useContext(AppContext);-const-[isEdit,-setIsEdit]-=-useState(false);-const-updateProfile-=-async-()-=>-{-try-{-const-updateData-=-{-careGiverId:-profileData._id,-fees:-profileData.fees,-address:-profileData.address,-available:-profileData.available,-about:-profileData.about,-phoneNumber:-profileData.phoneNumber,-dob:-profileData.dob,-image:-profileData.image,-experience:-profileData.experience,-languages:-profileData.languages,-date_time_preference_to_work:-profileData.date_time_preference_to_work,-};-const-{-data-}-=-await-axios.post(-`${backendUrl}/api/caregiver/update-profile`,-updateData,-{-headers:-{-cToken-}-}-);-if-(data.success)-{-toast.success(data.message);-setIsEdit(false);-getProfileData();-}-else-{-toast.error(data.message);-}-}-catch-(error)-{-toast.error("Failed-to-update-profile");-console.log(error);-}-};-useEffect(()-=>-{-if-(cToken)-getProfileData();-},-[cToken]);-return-(-profileData-&&-(-<div-className="flex-flex-col-gap-4-m-5">-<div>-<img-className="bg-primary/40-w-full-sm:max-w-64-rounded-lg"-src={profileData.image}-alt="Caregiver"-/>-</div>-<div-className="flex-1-border-border-stone-100-rounded-lg-p-8-py-7-bg-white">-{/*-------CareGiver-Info-:-name,-degree,-experience-------*/}-<p-className="flex-items-center-gap-2-text-3xl-font-medium-text-gray-700">-{profileData.name}-</p>-<div-className="flex-items-center-gap-2-mt-1-text-gray-600">-{profileData.education}---{profileData.category}-<button-className="py-0.5-px-2-border-text-xs-rounded-full">-{profileData.experience}-</button>-</div>-<div-className="mt-4">-<label>Phone-Number:</label>-{isEdit-?-(-<input-type="text"-value={profileData.phoneNumber}-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-phoneNumber:-e.target.value,-}))-}-/>-)-:-(-<p>{profileData.phoneNumber}</p>-)}-</div>-{/*-------Care-giver-About-------*/}-<div>-<p-className="flex-items-center-gap-1-text-sm-font-medium-text-[#262626]-mt-3">-About-:-</p>-<p-className="text-sm-text-gray-600-max-w-[700px]-mt-1">-{isEdit-?-(-<textarea-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-about:-e.target.value,-}))-}-type="text"-className="w-full-outline-primary-p-2"-rows={8}-value={profileData.about}-/>-)-:-(-profileData.about-)}-</p>-</div>-<div-className="mt-4">-<label>Languages:</label>-{isEdit-?-(-<input-type="text"-value={profileData.languages}-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-languages:-e.target.value,-}))-}-/>-)-:-(-<p>{profileData.languages}</p>-)}-</div>-<div-className="mt-4">-<label>Date-Time-Preference:</label>-{isEdit-?-(-<input-type="text"-value={profileData.date_time_preference_to_work}-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-date_time_preference_to_work:-e.target.value,-}))-}-/>-)-:-(-<p>{profileData.date_time_preference_to_work}</p>-)}-</div>-<div-className="mt-4">-<label>Experience:</label>-{isEdit-?-(-<input-type="text"-value={profileData.experience}-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-experience:-e.target.value,-}))-}-/>-)-:-(-<p>{profileData.experience}</p>-)}-</div>-<p-className="text-gray-600-font-medium-mt-4">-Date-of-Birth:{"-"}-<span-className="text-gray-800">-{isEdit-?-(-<input-type="date"-value={profileData.dob}-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-dob:-e.target.value,-}))-}-/>-)-:-(-<p>{profileData.dob}</p>-)}-</span>-</p>-<p-className="text-gray-600-font-medium-mt-4">-Appointment-fee:{"-"}-<span-className="text-gray-800">-{currency}{"-"}-{isEdit-?-(-<input-type="number"-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-fees:-e.target.value,-}))-}-value={profileData.fees}-/>-)-:-(-profileData.fees-)}-</span>-</p>-<div-className="mt-4">-<label>Address:</label>-<div>-{isEdit-?-(-<>-<input-type="text"-value={profileData.address.line1}-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-address:-{-...prev.address,-line1:-e.target.value-},-}))-}-placeholder="Line-1"-/>-<input-type="text"-value={profileData.address.line2}-onChange={(e)-=>-setProfileData((prev)-=>-({-...prev,-address:-{-...prev.address,-line2:-e.target.value-},-}))-}-placeholder="Line-2"-/>-</>-)-:-(-<p>-{profileData.address.line1},-{profileData.address.line2}-</p>-)}-</div>-</div>-<div-className="mt-4">-<label-className="mr-2">Available:</label>-<div-className={`relative-inline-flex-items-center-h-6-rounded-full-w-11-cursor-pointer-${-profileData.available-?-"bg-primary"-:-"bg-gray-300"-}`}-onClick={()-=>-isEdit-&&-setProfileData((prev)-=>-({-...prev,-available:-!prev.available,-}))-}->-<span-className={`${-profileData.available-?-"translate-x-6"-:-"translate-x-1"-}-inline-block-w-4-h-4-transform-bg-white-rounded-full-transition-transform`}-></span>-</div>-</div>-<div-className="mt-4">-{isEdit-?-(-<button-onClick={updateProfile}-className="px-4-py-1-border-border-primary-text-sm-rounded-full-mt-5-hover:bg-primary-hover:text-white-transition-all"->-Save-</button>-)-:-(-<button-onClick={()-=>-setIsEdit((prev)-=>-!prev)}-className="px-4-py-1-border-border-primary-text-sm-rounded-full-mt-5-hover:bg-primary-hover:text-white-transition-all"->-Edit-</button>-)}-</div>-</div>-</div>-)-);-};-export-default-CareGiverProfile;