avatar

2026-07-17 23:19:14 +03:30
parent a5724369da
commit 94a0091d1b
9 changed files with 175 additions and 52 deletions
@@ -1,5 +1,6 @@
 import { type FC, useEffect, useState } from 'react'
 import Input from '@/components/Input'
+import UserAvatar from '@/components/UserAvatar'
 import { ArrowDown2, CloseCircle, HambergerMenu, Logout } from 'iconsax-react'
 import { Link } from 'react-router-dom'
 import { useLocation } from 'react-router-dom'
@@ -21,7 +22,6 @@ const Header: FC = () => {

    const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
    const roleTitle = admin?.role?.title || admin?.role?.name || ''
-    const initials = `${String(admin?.firstName ?? '').charAt(0)}${String(admin?.lastName ?? '').charAt(0)}`

    useEffect(() => {
        setPopoverKey((prevKey) => prevKey + 1);
@@ -53,9 +53,13 @@ const Header: FC = () => {
                    <Popover className="relative" key={popoverKey}>
                        <PopoverButton>
                            <div className='flex gap-2 items-center mt-2.5'>
-                                <div className='size-6 rounded-full bg-description overflow-hidden flex items-center justify-center text-white text-xs font-medium'>
-                                    {initials}
-                                </div>
+                                <UserAvatar
+                                    src={admin.avatarUrl}
+                                    firstName={admin.firstName}
+                                    lastName={admin.lastName}
+                                    className='size-6'
+                                    textClassName='text-xs'
+                                />
                                <div className='xl:flex hidden gap-1 items-center'>
                                    <div className='flex flex-col items-start'>
                                        <div className='text-xs'>
@@ -77,9 +81,13 @@ const Header: FC = () => {
                                <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
                            </div>
                            <Link to={`${Paths.admin.update}${admin.id}`} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
-                                <div className='size-14 rounded-full bg-description flex items-center justify-center text-white text-lg font-medium'>
-                                    {initials}
-                                </div>
+                                <UserAvatar
+                                    src={admin.avatarUrl}
+                                    firstName={admin.firstName}
+                                    lastName={admin.lastName}
+                                    className='size-14'
+                                    textClassName='text-lg'
+                                />
                                <div>
                                    {displayName || String(admin.phone ?? '')}
                                </div>
@@ -113,4 +121,4 @@ const Header: FC = () => {
    )
 }

-export default Header
+export default Header