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

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

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

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

@@ -313,16 +313,15 @@ export default function UserDetailPage() {
<div className="flex items-center">
{/* Avatar */}
<div className="flex-shrink-0 h-20 w-20">
{avatarUrl ? (
<img className="h-20 w-20 rounded-full object-cover" src={avatarUrl} alt="" />
) : (
<div className="h-20 w-20 rounded-full bg-[#e8f0ee] flex items-center justify-center">
<div className="h-20 w-20 rounded-full bg-[#e8f0ee] flex items-center justify-center relative overflow-hidden">
<span className="text-[#666666] font-medium text-2xl">
{user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
</span>
</div>
{avatarUrl && (
<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'; }} />
)}
</div>
</div>
{/* Name & Email */}
<div className="ml-6 flex-1">

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

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