feat: add new contact page with form and contact details
This commit is contained in:
pradeepkumar
@@ -41,40 +41,41 @@ interface SettingsSidebarProps {
|
||||
|
||||
export function SettingsSidebar({
|
||||
profileImage = '/assets/icons/user-placeholder-icon.svg',
|
||||
name = 'Brain Nooland',
|
||||
name = 'Brain Neeland',
|
||||
title = 'Top Real Estate Agent',
|
||||
}: SettingsSidebarProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<div className="w-full lg:w-[280px] bg-white rounded-[15px] border border-[#00293d]/10 overflow-hidden h-fit">
|
||||
{/* Profile Section */}
|
||||
<div className="p-6 flex flex-col items-center">
|
||||
<div className="w-[80px] h-[80px] rounded-full overflow-hidden mb-3 border-2 border-[#e58625]">
|
||||
<Image
|
||||
src={profileImage}
|
||||
alt={name}
|
||||
width={80}
|
||||
height={80}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="w-full lg:w-[300px] space-y-4">
|
||||
{/* Profile Card */}
|
||||
<div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0">
|
||||
<Image
|
||||
src={profileImage}
|
||||
alt={name}
|
||||
width={70}
|
||||
height={70}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
|
||||
{name}
|
||||
</h3>
|
||||
<p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
|
||||
{name}
|
||||
</h3>
|
||||
<p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/70 mt-1">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-full h-[1px] bg-[#00293d]/10" />
|
||||
|
||||
{/* Categories Section */}
|
||||
<div className="p-4">
|
||||
{/* Categories Card */}
|
||||
<div className="bg-white rounded-[15px] border border-[#00293D]/20 overflow-hidden">
|
||||
{/* Categories Header */}
|
||||
<div className="flex items-center justify-between mb-4 px-2">
|
||||
<h4 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-[#00293D]/10">
|
||||
<h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
|
||||
Categories
|
||||
</h4>
|
||||
<Image
|
||||
@@ -86,38 +87,32 @@ export function SettingsSidebar({
|
||||
</div>
|
||||
|
||||
{/* Navigation Items */}
|
||||
<nav className="space-y-1">
|
||||
<nav className="py-2">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 py-3 px-3 rounded-[10px] transition-colors cursor-pointer ${
|
||||
className={`flex items-center gap-4 py-3 px-5 transition-colors cursor-pointer ${
|
||||
isActive
|
||||
? 'bg-[#e58625]/10'
|
||||
? 'bg-[#e58625]'
|
||||
: 'hover:bg-[#00293d]/5'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-5 h-5 flex items-center justify-center ${
|
||||
isActive ? 'text-[#e58625]' : 'text-[#00293D]'
|
||||
}`}
|
||||
style={{ color: isActive ? '#e58625' : '#00293D' }}
|
||||
>
|
||||
<div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
|
||||
<Image
|
||||
src={item.icon}
|
||||
alt={item.label}
|
||||
width={20}
|
||||
height={20}
|
||||
className={isActive ? 'brightness-0 saturate-100' : ''}
|
||||
style={isActive ? { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' } : {}}
|
||||
style={isActive ? { filter: 'brightness(0) invert(1)' } : { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' }}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className={`font-serif text-[14px] leading-[19px] ${
|
||||
isActive
|
||||
? 'font-medium text-[#e58625]'
|
||||
? 'font-medium text-white'
|
||||
: 'font-normal text-[#00293D]'
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -6,12 +6,11 @@ import { SettingsSidebar } from './component/SettingsSidebar';
|
||||
|
||||
export default function ProfileSettingsPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: 'Brain',
|
||||
lastName: 'Nooland',
|
||||
email: 'brain.nooland@email.com',
|
||||
phone: '+1 (555) 123-4567',
|
||||
title: 'Top Real Estate Agent',
|
||||
location: 'Los Angeles, CA',
|
||||
fullName: 'Brain Neeland',
|
||||
career: 'Real Estate Agent',
|
||||
email: 'Brain.Neeland1234@gmail.com',
|
||||
phone: '+917483849544',
|
||||
location: 'New York',
|
||||
});
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
@@ -22,145 +21,152 @@ export default function ProfileSettingsPage() {
|
||||
console.log('Saving profile settings:', formData);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
console.log('Cancelling changes');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar
|
||||
name={`${formData.firstName} ${formData.lastName}`}
|
||||
title={formData.title}
|
||||
name={formData.fullName}
|
||||
title={formData.career}
|
||||
/>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
{/* Header Card */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
|
||||
<h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
|
||||
Profile Settings
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Profile Settings Form */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
|
||||
<div className="border border-[#00293d]/20 rounded-[15px] bg-white p-8">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<h1 className="font-fractul font-bold text-[20px] leading-[24px] text-[#00293D] mb-2">
|
||||
Public Profile
|
||||
</h1>
|
||||
<p className="font-serif text-[13px] leading-[17px] text-[#00293D]/60">
|
||||
This information will be displayed on your public agent page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Profile Photo Section */}
|
||||
<div className="flex items-center gap-6 mb-8 pb-6 border-b border-[#00293d]/10">
|
||||
<div className="relative">
|
||||
<div className="w-[100px] h-[100px] rounded-full overflow-hidden border-2 border-[#e58625]">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden border border-[#00293D]/20 flex-shrink-0">
|
||||
<Image
|
||||
src="/assets/icons/user-placeholder-icon.svg"
|
||||
alt="Profile"
|
||||
width={100}
|
||||
height={100}
|
||||
width={60}
|
||||
height={60}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<button className="absolute bottom-0 right-0 w-8 h-8 bg-[#e58625] rounded-full flex items-center justify-center hover:bg-[#d47920] transition-colors">
|
||||
<Image
|
||||
src="/assets/icons/edit-icon.svg"
|
||||
alt="Edit"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-fractul font-bold text-[16px] text-[#00293D] mb-1">
|
||||
Profile Photo
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60 mb-3">
|
||||
JPG, GIF or PNG. Max size 2MB
|
||||
</p>
|
||||
<button className="px-4 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
|
||||
Upload New Photo
|
||||
</button>
|
||||
<div>
|
||||
<p className="font-serif font-medium text-[14px] text-[#00293D] mb-2">
|
||||
Public Picture
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<button className="px-4 py-1.5 bg-[#e58625] text-white rounded-[20px] font-serif text-[12px] hover:bg-[#d47920] transition-colors">
|
||||
Upload Now
|
||||
</button>
|
||||
<button className="px-4 py-1.5 border border-[#00293D]/30 text-[#00293D] rounded-[20px] font-serif text-[12px] hover:bg-[#00293d]/5 transition-colors">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<p className="font-serif text-[11px] text-[#00293D]/50">
|
||||
Supported formats: JPEG, PNG, GIF Max file size: 2MB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Fields */}
|
||||
<div className="space-y-6">
|
||||
{/* Name Row */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="space-y-5">
|
||||
{/* Row 1: Full Name & Career */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
First Name
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleChange('firstName', e.target.value)}
|
||||
className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
value={formData.fullName}
|
||||
onChange={(e) => handleChange('fullName', e.target.value)}
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Last Name
|
||||
Career
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleChange('lastName', e.target.value)}
|
||||
className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
value={formData.career}
|
||||
onChange={(e) => handleChange('career', e.target.value)}
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
{/* Row 2: Email & Phone */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange('phone', e.target.value)}
|
||||
className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
{/* Row 3: Service Area Location */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Phone Number
|
||||
Service Area Location
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange('phone', e.target.value)}
|
||||
className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Professional Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.title}
|
||||
onChange={(e) => handleChange('title', e.target.value)}
|
||||
className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.location}
|
||||
onChange={(e) => handleChange('location', e.target.value)}
|
||||
className="w-full h-[40px] px-4 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
<div className="relative">
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2">
|
||||
<Image
|
||||
src="/assets/icons/location-icon.svg"
|
||||
alt="Location"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.location}
|
||||
onChange={(e) => handleChange('location', e.target.value)}
|
||||
className="w-full sm:w-1/2 h-[44px] pl-10 pr-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="mt-8 flex justify-end">
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-8 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="px-8 py-3 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#00293d]/5 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
|
||||
className="px-8 py-3 bg-[#e58625] text-white rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#d47920] transition-colors"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user