Mohammadali
b0ce5ce2f9
feat(wallet): enhance wallet UI and transaction item display fix(profile): update profile detail card to handle loading and error states style: improve UI consistency across profile and wallet components
70 lines
No EOL
2.3 KiB
TypeScript
70 lines
No EOL
2.3 KiB
TypeScript
'use client';
|
||
import { useAccount } from "@/lib/providers/account-provider";
|
||
import { getDisplayNameHelper, getInitialsHelper } from "@/lib/utils/account-utils";
|
||
|
||
const ProfilePersonDetailCard = () => {
|
||
const { data, error, isLoading } = useAccount();
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
|
||
<p className="text-sm text-gray-500">در حال بارگذاری...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
|
||
<p className="text-sm text-destructive">{error}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!data) {
|
||
return (
|
||
<div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
|
||
<p className="text-sm text-gray-500">اطلاعات پروفایل یافت نشد</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const displayName = getDisplayNameHelper(data);
|
||
const initials = getInitialsHelper(data);
|
||
|
||
return (
|
||
<div className="w-full min-h-[128px] rounded-2xl bg-teal-light my-6 py-4 px-10 flex items-center justify-center">
|
||
<div className="flex flex-row items-center w-full">
|
||
<div className="size-16 bg-primary-action rounded-full flex items-center justify-center text-lg font-bold text-white overflow-hidden shrink-0">
|
||
{data.avatar ? (
|
||
<img
|
||
src={data.avatar}
|
||
alt={displayName}
|
||
className="size-full object-cover"
|
||
/>
|
||
) : (
|
||
<span>{initials}</span>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-col mr-6 items-start">
|
||
<p className="text-lg font-bold">{displayName}</p>
|
||
|
||
{data.phone_number && (
|
||
<p className="text-sm text-gray-700 my-2 font-normal" dir="ltr">
|
||
{data.phone_number}
|
||
</p>
|
||
)}
|
||
|
||
<button
|
||
className="text-sm font-semibold text-primary-action cursor-pointer underline"
|
||
onClick={() => alert('latter...')}
|
||
>
|
||
ویرایش پروفایل
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ProfilePersonDetailCard; |