76 lines
4.2 KiB
TypeScript
76 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { User } from '@/types/user';
|
|
import { formatDate, formatPrice, getFullName, getEmail, getMobile } from '@/lib/utils';
|
|
import { CalendarIcon, EnvelopeIcon, PhoneIcon, WalletIcon, UserIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface UserInfoProps {
|
|
user: User;
|
|
}
|
|
|
|
export default function UserInfo({ user }: UserInfoProps) {
|
|
return (
|
|
<div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
|
|
<div className="px-4 py-5 sm:px-6">
|
|
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
|
اطلاعات کاربر
|
|
</h3>
|
|
</div>
|
|
<div className="border-t border-gray-200">
|
|
<dl>
|
|
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-500">نام کامل</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
|
<UserIcon className="h-4 w-4 ml-1 text-gray-400" />
|
|
{getFullName(user)}
|
|
</dd>
|
|
</div>
|
|
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-500">ایمیل</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
|
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
|
|
{getEmail(user.email)}
|
|
</dd>
|
|
</div>
|
|
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-500">شماره موبایل</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
|
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
|
|
{getMobile(user.mobile)}
|
|
</dd>
|
|
</div>
|
|
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-500">کیف پول</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
|
<WalletIcon className="h-4 w-4 ml-1 text-gray-400" />
|
|
{formatPrice(user.wallet)} تومان
|
|
</dd>
|
|
</div>
|
|
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-500">تاریخ عضویت</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
|
<CalendarIcon className="h-4 w-4 ml-1 text-gray-400" />
|
|
{formatDate(user.created_at)}
|
|
</dd>
|
|
</div>
|
|
{user.birthday && (
|
|
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-500">تاریخ تولد</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
|
{formatDate(user.birthday)}
|
|
</dd>
|
|
</div>
|
|
)}
|
|
{user.gender && (
|
|
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-500">جنسیت</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
|
{user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
|
|
</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |