84 lines
3.5 KiB
TypeScript
84 lines
3.5 KiB
TypeScript
import React from 'react'
|
|
import { UserCircleIcon, EnvelopeIcon, PhoneIcon, MapPinIcon, PencilIcon, CheckCircleIcon } from '@heroicons/react/24/outline'
|
|
|
|
export default function BasicInformation({ profileData, HighlightIfMissing, onEdit }: {
|
|
profileData: any,
|
|
HighlightIfMissing: React.FC<{ value: any, children: React.ReactNode }>
|
|
onEdit?: () => void
|
|
}) {
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-lg font-semibold text-gray-900">Basic Information</h2>
|
|
<button
|
|
className="flex items-center text-[#8D6B1D] hover:text-[#7A5E1A] transition-colors"
|
|
onClick={onEdit}
|
|
>
|
|
<PencilIcon className="h-4 w-4 mr-1" />
|
|
Edit
|
|
</button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
First Name
|
|
</label>
|
|
<div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
|
|
<UserCircleIcon className="h-5 w-5 text-gray-400 mr-3" />
|
|
<HighlightIfMissing value={profileData.firstName}>
|
|
<span className="text-gray-900">{profileData.firstName}</span>
|
|
</HighlightIfMissing>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Last Name
|
|
</label>
|
|
<div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
|
|
<UserCircleIcon className="h-5 w-5 text-gray-400 mr-3" />
|
|
<HighlightIfMissing value={profileData.lastName}>
|
|
<span className="text-gray-900">{profileData.lastName}</span>
|
|
</HighlightIfMissing>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email Address
|
|
</label>
|
|
<div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
|
|
<EnvelopeIcon className="h-5 w-5 text-gray-400 mr-3" />
|
|
<HighlightIfMissing value={profileData.email}>
|
|
<span className="text-gray-900">{profileData.email}</span>
|
|
</HighlightIfMissing>
|
|
<CheckCircleIcon className="h-5 w-5 text-green-500 ml-auto" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Phone Number
|
|
</label>
|
|
<div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
|
|
<PhoneIcon className="h-5 w-5 text-gray-400 mr-3" />
|
|
<HighlightIfMissing value={profileData.phone}>
|
|
<span className="text-gray-900">{profileData.phone}</span>
|
|
</HighlightIfMissing>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Address
|
|
</label>
|
|
<div className="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
|
|
<MapPinIcon className="h-5 w-5 text-gray-400 mr-3" />
|
|
<HighlightIfMissing value={profileData.address}>
|
|
<span className="text-gray-900">{profileData.address}</span>
|
|
</HighlightIfMissing>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|