Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add new contact page with form and contact details

Browse Source
This commit is contained in:
pradeepkumar
2026-01-19 00:23:46 +05:30
parent 2bca1ff0c0
commit 3ceb3dc866
2 changed files with 139 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/app/(agent)/agent/settings/component/SettingsSidebar.tsx
View File

@@ -41,40 +41,41 @@ interface SettingsSidebarProps {
export function SettingsSidebar({ export function SettingsSidebar({
profileImage = '/assets/icons/user-placeholder-icon.svg', profileImage = '/assets/icons/user-placeholder-icon.svg',
name = 'Brain Nooland', name = 'Brain Neeland',
title = 'Top Real Estate Agent', title = 'Top Real Estate Agent',
}: SettingsSidebarProps) { }: SettingsSidebarProps) {
const pathname = usePathname(); const pathname = usePathname();
return ( return (
<div className="w-full lg:w-[280px] bg-white rounded-[15px] border border-[#00293d]/10 overflow-hidden h-fit"> <div className="w-full lg:w-[300px] space-y-4">
{/* Profile Section */} {/* Profile Card */}
<div className="p-6 flex flex-col items-center"> <div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
<div className="w-[80px] h-[80px] rounded-full overflow-hidden mb-3 border-2 border-[#e58625]"> <div className="flex items-center gap-4">
<Image <div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0">
src={profileImage} <Image
alt={name} src={profileImage}
width={80} alt={name}
height={80} width={70}
className="w-full h-full object-cover" 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> </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> </div>
{/* Divider */} {/* Categories Card */}
<div className="w-full h-[1px] bg-[#00293d]/10" /> <div className="bg-white rounded-[15px] border border-[#00293D]/20 overflow-hidden">
{/* Categories Section */}
<div className="p-4">
{/* Categories Header */} {/* Categories Header */}
<div className="flex items-center justify-between mb-4 px-2"> <div className="flex items-center justify-between px-5 py-4 border-b border-[#00293D]/10">
<h4 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]"> <h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
Categories Categories
</h4> </h4>
<Image <Image
@@ -86,38 +87,32 @@ export function SettingsSidebar({
</div> </div>
{/* Navigation Items */} {/* Navigation Items */}
<nav className="space-y-1"> <nav className="py-2">
{navItems.map((item) => { {navItems.map((item) => {
const isActive = pathname === item.href; const isActive = pathname === item.href;
return ( return (
<Link <Link
key={item.href} key={item.href}
href={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 isActive
? 'bg-[#e58625]/10' ? 'bg-[#e58625]'
: 'hover:bg-[#00293d]/5' : 'hover:bg-[#00293d]/5'
}`} }`}
> >
<div <div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
className={`w-5 h-5 flex items-center justify-center ${
isActive ? 'text-[#e58625]' : 'text-[#00293D]'
}`}
style={{ color: isActive ? '#e58625' : '#00293D' }}
>
<Image <Image
src={item.icon} src={item.icon}
alt={item.label} alt={item.label}
width={20} width={20}
height={20} height={20}
className={isActive ? 'brightness-0 saturate-100' : ''} style={isActive ? { filter: 'brightness(0) invert(1)' } : { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' }}
style={isActive ? { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' } : {}}
/> />
</div> </div>
<span <span
className={`font-serif text-[14px] leading-[19px] ${ className={`font-serif text-[14px] leading-[19px] ${
isActive isActive
? 'font-medium text-[#e58625]' ? 'font-medium text-white'
: 'font-normal text-[#00293D]' : 'font-normal text-[#00293D]'
}`} }`}
> >

208
src/app/(agent)/agent/settings/page.tsx
View File

@@ -6,12 +6,11 @@ import { SettingsSidebar } from './component/SettingsSidebar';
export default function ProfileSettingsPage() { export default function ProfileSettingsPage() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
firstName: 'Brain', fullName: 'Brain Neeland',
lastName: 'Nooland', career: 'Real Estate Agent',
email: 'brain.nooland@email.com', email: 'Brain.Neeland1234@gmail.com',
phone: '+1 (555) 123-4567', phone: '+917483849544',
title: 'Top Real Estate Agent', location: 'New York',
location: 'Los Angeles, CA',
}); });
const handleChange = (field: string, value: string) => { const handleChange = (field: string, value: string) => {
@@ -22,145 +21,152 @@ export default function ProfileSettingsPage() {
console.log('Saving profile settings:', formData); console.log('Saving profile settings:', formData);
}; };
const handleCancel = () => {
console.log('Cancelling changes');
};
return ( return (
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
{/* Left Sidebar */} {/* Left Sidebar */}
<SettingsSidebar <SettingsSidebar
name={`${formData.firstName} ${formData.lastName}`} name={formData.fullName}
title={formData.title} title={formData.career}
/> />
{/* Main Content */} {/* Main Content */}
<div className="flex-1"> <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 */} {/* 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 */} {/* Profile Photo Section */}
<div className="flex items-center gap-6 mb-8 pb-6 border-b border-[#00293d]/10"> <div className="mb-8">
<div className="relative"> <div className="flex items-start gap-4">
<div className="w-[100px] h-[100px] rounded-full overflow-hidden border-2 border-[#e58625]"> <div className="w-[60px] h-[60px] rounded-full overflow-hidden border border-[#00293D]/20 flex-shrink-0">
<Image <Image
src="/assets/icons/user-placeholder-icon.svg" src="/assets/icons/user-placeholder-icon.svg"
alt="Profile" alt="Profile"
width={100} width={60}
height={100} height={60}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </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"> <div>
<Image <p className="font-serif font-medium text-[14px] text-[#00293D] mb-2">
src="/assets/icons/edit-icon.svg" Public Picture
alt="Edit" </p>
width={16} <div className="flex items-center gap-2 mb-2">
height={16} <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>
</div> <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">
<div> Delete
<h3 className="font-fractul font-bold text-[16px] text-[#00293D] mb-1"> </button>
Profile Photo </div>
</h3> <p className="font-serif text-[11px] text-[#00293D]/50">
<p className="font-serif text-[12px] text-[#00293D]/60 mb-3"> Supported formats: JPEG, PNG, GIF Max file size: 2MB
JPG, GIF or PNG. Max size 2MB </p>
</p> </div>
<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> </div>
</div> </div>
{/* Form Fields */} {/* Form Fields */}
<div className="space-y-6"> <div className="space-y-5">
{/* Name Row */} {/* Row 1: Full Name & Career */}
<div className="flex flex-col sm:flex-row gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div className="flex-1"> <div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2"> <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
First Name Full Name
</label> </label>
<input <input
type="text" type="text"
value={formData.firstName} value={formData.fullName}
onChange={(e) => handleChange('firstName', e.target.value)} onChange={(e) => handleChange('fullName', 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]" 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>
<div className="flex-1"> <div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2"> <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
Last Name Career
</label> </label>
<input <input
type="text" type="text"
value={formData.lastName} value={formData.career}
onChange={(e) => handleChange('lastName', e.target.value)} onChange={(e) => handleChange('career', 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]" 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>
</div> </div>
{/* Email */} {/* Row 2: Email & Phone */}
<div> <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2"> <div>
Email Address <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
</label> Email Address
<input </label>
type="email" <input
value={formData.email} type="email"
onChange={(e) => handleChange('email', e.target.value)} value={formData.email}
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]" 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> </div>
{/* Phone */} {/* Row 3: Service Area Location */}
<div> <div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2"> <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
Phone Number Service Area Location
</label> </label>
<input <div className="relative">
type="tel" <div className="absolute left-4 top-1/2 -translate-y-1/2">
value={formData.phone} <Image
onChange={(e) => handleChange('phone', e.target.value)} src="/assets/icons/location-icon.svg"
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]" alt="Location"
/> width={16}
</div> height={16}
/>
{/* Title */} </div>
<div> <input
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2"> type="text"
Professional Title value={formData.location}
</label> onChange={(e) => handleChange('location', e.target.value)}
<input 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]"
type="text" />
value={formData.title} </div>
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> </div>
</div> </div>
{/* Save Button */} {/* Action Buttons */}
<div className="mt-8 flex justify-end"> <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 <button
onClick={handleSave} 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 Save Changes
</button> </button>