show profile user in header

src/components/topbar/TopBar.tsx

@@ -10,6 +10,7 @@ import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import useToggle from '@/hooks/helpers/useToggle'
 import LogoutPrompt from '@/features/general/LogoutPrompt'
+import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData'
 
 type Props = {
     profileDropState: boolean,
@@ -23,9 +24,13 @@ type Props = {
 }
 
 function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: Props) {
+
     const params = useParams();
     const { name } = params;
     const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
+    const { data: profile } = useGetProfile();
+    const profileData = profile?.data;
+    const fullName = profileData ? `${profileData.firstName} ${profileData.lastName}`.trim() : 'کاربر داناک';
 
     return (
         <div className="w-full">
@@ -76,9 +81,9 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                             height={24}
                             alt='Profile avatar'
                             className='rounded-full'
-                            src={'/assets/images/user-avatar.png'} />
+                            src={'/assets/images/avatar.svg'} />
                         <div className='pe-0 hidden xl:inline-flex items-end' >
-                            <div className='ps-2 pe-1 text-xs text-nowrap'>مهرداد مظفری</div>
+                            <div className='ps-2 pe-1 text-xs text-nowrap'>{fullName}</div>
                             <ArrowDown2 className='stroke-disabled-text' size={14} />
                             {/* <img src={arrow} /> */}
                         </div>
@@ -91,14 +96,15 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                 >
                     <div className='place-items-center pt-8'>
                         <Image
-                            src={'/assets/images/user-avatar.png'}
+                            src={'/assets/images/avatar.svg'}
                             width={56}
                             height={56}
                             className='rounded-full'
                             unoptimized
                             alt={'user avatar'}
                         />
-                        <p className='text-xs mt-2'>mail@danakcorp.com</p>
+                        <p className='text-xs mt-2'>{profileData?.firstName + ' ' + profileData?.lastName}</p>
+                        {/* <p className='text-xs mt-2'>{profileData?.phone}</p> */}
                     </div>
 
                     <Seperator className='my-6' />