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

feat: Introduce shared settings components, implement user settings pages, and refactor agent settings pages to utilize them.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-20 12:37:22 +05:30
parent f035129b6a
commit d325089ce0
17 changed files with 1284 additions and 725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/components/settings/ProfileSettingsForm.tsx Normal file
View File

@@ -0,0 +1,191 @@
'use client';
import { useState } from 'react';
import Image from 'next/image';
interface ProfileSettingsFormProps {
initialData?: {
fullName: string;
career: string;
email: string;
phone: string;
location: string;
};
onSave?: (data: {
fullName: string;
career: string;
email: string;
phone: string;
location: string;
}) => void;
descriptionText?: string;
}
export function ProfileSettingsForm({
initialData = {
fullName: 'Brain Neeland',
career: 'Real Estate Agent',
email: 'Brain.Neeland1234@gmail.com',
phone: '+917483849544',
location: 'New York',
},
onSave,
descriptionText = 'This information will be displayed on your public profile page.',
}: ProfileSettingsFormProps) {
const [formData, setFormData] = useState(initialData);
const handleChange = (field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSave = () => {
if (onSave) {
onSave(formData);
} else {
console.log('Saving profile settings:', formData);
}
};
const handleCancel = () => {
setFormData(initialData);
};
return (
<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">
{descriptionText}
</p>
</div>
{/* Profile Photo Section */}
<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={60}
height={60}
className="w-full h-full object-cover"
/>
</div>
<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-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">
Full Name
</label>
<input
type="text"
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>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
Career
</label>
<input
type="text"
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>
{/* 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>
{/* Row 3: Location */}
<div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
Location
</label>
<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>
{/* 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-[10px] font-serif font-medium text-[14px] hover:bg-[#d47920] transition-colors"
>
Save Changes
</button>
</div>
</div>
);
}