hamid zarghami
103 lines
4.7 KiB
TypeScript
103 lines
4.7 KiB
TypeScript
"use client";
|
||
|
||
import Button from '@/components/button/PrimaryButton';
|
||
// import { useProfile } from '@/hooks/auth/useProfile';
|
||
// import { useAuthStore } from '@/zustand/authStore';
|
||
import { ArrowLeft, Calendar2, CallCalling, Profile } from 'iconsax-react';
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
import { useRouter } from 'next/navigation';
|
||
import React from 'react'
|
||
import { useGetProfile } from './hooks/userProfileData';
|
||
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
|
||
|
||
type Props = object
|
||
|
||
function ProfileIndex({ }: Props) {
|
||
|
||
const router = useRouter();
|
||
const { data, isPending } = useGetProfile();
|
||
|
||
const formatDate = (dateString: string): string => {
|
||
const date = new Date(dateString);
|
||
return date.toLocaleDateString('fa-IR', {
|
||
year: 'numeric',
|
||
month: 'numeric',
|
||
day: 'numeric'
|
||
});
|
||
};
|
||
|
||
const userData = data?.data;
|
||
const fullName = userData ? `${userData.firstName} ${userData.lastName}` : '';
|
||
const genderText = userData?.gender ? 'آقا' : 'خانوم';
|
||
|
||
return (
|
||
<div className='overflow-y-auto h-full noscrollbar flex flex-col'>
|
||
<div className='grid grid-cols-3 items-center'>
|
||
<span></span>
|
||
<h1 className='text-sm2 place-self-center font-medium'>پروفایل کاربری</h1>
|
||
<ArrowLeft
|
||
className='cursor-pointer place-self-end'
|
||
size='24'
|
||
color='currentColor'
|
||
onClick={() => { router.back() }}
|
||
/>
|
||
</div>
|
||
|
||
<div className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
|
||
|
||
<div className="">
|
||
<div className="flex items-center justify-start gap-3 pb-6 border-b-[1.5px] border-border">
|
||
<Image
|
||
src={userData?.avatarUrl ? userData.avatarUrl : '/assets/images/avatar.svg'}
|
||
className='rounded-full'
|
||
alt='user avatar'
|
||
width={65}
|
||
height={65}
|
||
/>
|
||
<div className='block'>
|
||
<div className='font-medium text-base '>
|
||
{isPending ? 'در حال بارگذاری...' : fullName || '-'}
|
||
</div>
|
||
{/* <div className='text-xs text-primary dark:text-neutral-200 mt-3 inline-flex items-center gap-2'>
|
||
<Verify size={16} className='stroke-primary dark:stroke-foreground mb-0.5' />
|
||
<span>
|
||
شناسه کاربری:
|
||
</span>
|
||
<span>{isPending ? '...' : userData?.id || '-'}</span>
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-6 mt-6">
|
||
<div className='inline-flex items-center gap-2.5'>
|
||
<CallCalling size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
|
||
<span className='text-sm2 text-disabled2 dark:text-gray-300'>شماره همراه:</span>
|
||
<span className='text-sm2'>{isPending ? '...' : userData?.phone || '-'}</span>
|
||
</div>
|
||
<div className='inline-flex items-center gap-2.5'>
|
||
<Calendar2 size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
|
||
<span className='text-sm2 text-disabled2 dark:text-gray-300'>تاریخ تولد:</span>
|
||
<span className='text-sm2'>
|
||
{isPending ? '...' : (userData?.birthDate ? formatDate(userData.birthDate) : '-')}
|
||
</span>
|
||
</div>
|
||
<div className='inline-flex items-center gap-2.5'>
|
||
<Profile size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
|
||
<span className='text-sm2 text-disabled2 dark:text-gray-300'>جنسیت:</span>
|
||
<span className='text-sm2'>{isPending ? '...' : genderText}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='w-full text-center mt-6'>
|
||
<Link href={'profile/edit'}>
|
||
<Button>ویرایش اطلاعات</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ProfileIndex |