Re-Quest/adminpanel
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve user avatar rendering by always displaying initials and handling image load errors.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-27 15:36:47 +05:30
parent b6be184fbd
commit 6948a63e07
3 changed files with 34 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/dashboard/page.tsx
View File

@@ -221,19 +221,19 @@ export default function DashboardPage() {
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10"> <div className="flex-shrink-0 h-10 w-10">
{avatarUrls[user.id] ? ( <div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center relative overflow-hidden">
<img <span className="text-[#00293d] font-medium text-sm font-fractul">
className="h-10 w-10 rounded-full object-cover" {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
src={avatarUrls[user.id]} </span>
alt="" {avatarUrls[user.id] && (
/> <img
) : ( className="absolute inset-0 h-10 w-10 rounded-full object-cover"
<div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center"> src={avatarUrls[user.id]}
<span className="text-[#00293d] font-medium text-sm font-fractul"> alt=""
{user.profile?.firstName?.[0] || user.email[0].toUpperCase()} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
</span> />
</div> )}
)} </div>
</div> </div>
<div className="ml-4"> <div className="ml-4">
<div className="text-sm font-medium text-[#00293d] font-serif"> <div className="text-sm font-medium text-[#00293d] font-serif">

17
src/app/dashboard/users/[id]/page.tsx
View File

@@ -313,15 +313,14 @@ export default function UserDetailPage() {
<div className="flex items-center"> <div className="flex items-center">
{/* Avatar */} {/* Avatar */}
<div className="flex-shrink-0 h-20 w-20"> <div className="flex-shrink-0 h-20 w-20">
{avatarUrl ? ( <div className="h-20 w-20 rounded-full bg-[#e8f0ee] flex items-center justify-center relative overflow-hidden">
<img className="h-20 w-20 rounded-full object-cover" src={avatarUrl} alt="" /> <span className="text-[#666666] font-medium text-2xl">
) : ( {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
<div className="h-20 w-20 rounded-full bg-[#e8f0ee] flex items-center justify-center"> </span>
<span className="text-[#666666] font-medium text-2xl"> {avatarUrl && (
{user.profile?.firstName?.[0] || user.email[0].toUpperCase()} <img className="absolute inset-0 h-20 w-20 rounded-full object-cover" src={avatarUrl} alt="" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
</span> )}
</div> </div>
)}
</div> </div>
{/* Name & Email */} {/* Name & Email */}

26
src/app/dashboard/users/page.tsx
View File

@@ -207,19 +207,19 @@ export default function UsersPage() {
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10"> <div className="flex-shrink-0 h-10 w-10">
{avatarUrls[user.id] ? ( <div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center relative overflow-hidden">
<img <span className="text-[#666666] font-medium text-sm">
className="h-10 w-10 rounded-full object-cover" {user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
src={avatarUrls[user.id]} </span>
alt="" {avatarUrls[user.id] && (
/> <img
) : ( className="absolute inset-0 h-10 w-10 rounded-full object-cover"
<div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center"> src={avatarUrls[user.id]}
<span className="text-[#666666] font-medium text-sm"> alt=""
{user.profile?.firstName?.[0] || user.email[0].toUpperCase()} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
</span> />
</div> )}
)} </div>
</div> </div>
<div className="ml-4"> <div className="ml-4">
<div className="text-sm font-medium text-[#00293d]"> <div className="text-sm font-medium text-[#00293d]">