feat: Introduce shared settings components, implement user settings pages, and refactor agent settings pages to utilize them.
This commit is contained in:
pradeepkumar
3
public/assets/icons/verified-badge-orange.svg
Normal file
3
public/assets/icons/verified-badge-orange.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="19" height="19" viewBox="0 0 37 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.6666 35L9.50028 29.6667L3.5 28.3333L4.08343 22.1667L0 17.5L4.08343 12.8333L3.5 6.66671L9.50028 5.33329L12.6666 0L18.3334 2.41657L24.0003 0L27.1666 5.33329L33.1669 6.66671L32.5834 12.8333L36.6666 17.5L32.5834 22.1667L33.1669 28.3333L27.1666 29.6667L24.0003 35L18.3334 32.5834L12.6666 35ZM16.5834 23.4167L26 14L23.6669 11.5833L16.5834 18.6666L13 15.1666L10.6669 17.5L16.5834 23.4167Z" fill="#E58625"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@@ -1 +0,0 @@
|
||||
export { SettingsSidebar } from './SettingsSidebar';
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { SettingsSidebar } from '../component/SettingsSidebar';
|
||||
import { SettingsSidebar, NotificationsForm } from '@/components/settings';
|
||||
|
||||
interface NotificationSetting {
|
||||
id: string;
|
||||
@@ -11,108 +10,17 @@ interface NotificationSetting {
|
||||
}
|
||||
|
||||
export default function NotificationsPage() {
|
||||
const [emailNotifications, setEmailNotifications] = useState<NotificationSetting[]>([
|
||||
{
|
||||
id: 'new_leads',
|
||||
label: 'New Leads',
|
||||
description: 'Get notified when you receive new leads',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'messages',
|
||||
label: 'Messages',
|
||||
description: 'Get notified when you receive new messages',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'connection_requests',
|
||||
label: 'Connection Requests',
|
||||
description: 'Get notified about new connection requests',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'property_updates',
|
||||
label: 'Property Updates',
|
||||
description: 'Get notified about property status changes',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
id: 'marketing',
|
||||
label: 'Marketing & Promotions',
|
||||
description: 'Receive marketing emails and promotions',
|
||||
enabled: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const [pushNotifications, setPushNotifications] = useState<NotificationSetting[]>([
|
||||
{
|
||||
id: 'push_messages',
|
||||
label: 'Messages',
|
||||
description: 'Push notifications for new messages',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'push_leads',
|
||||
label: 'New Leads',
|
||||
description: 'Push notifications for new leads',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'push_reminders',
|
||||
label: 'Reminders',
|
||||
description: 'Push notifications for scheduled reminders',
|
||||
enabled: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const toggleEmailNotification = (id: string) => {
|
||||
setEmailNotifications((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id ? { ...item, enabled: !item.enabled } : item
|
||||
)
|
||||
);
|
||||
const handleSave = (data: {
|
||||
emailNotifications: NotificationSetting[];
|
||||
pushNotifications: NotificationSetting[];
|
||||
}) => {
|
||||
console.log('Saving agent notification settings:', data);
|
||||
};
|
||||
|
||||
const togglePushNotification = (id: string) => {
|
||||
setPushNotifications((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id ? { ...item, enabled: !item.enabled } : item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
console.log('Saving notification settings:', {
|
||||
emailNotifications,
|
||||
pushNotifications,
|
||||
});
|
||||
};
|
||||
|
||||
const ToggleSwitch = ({
|
||||
enabled,
|
||||
onToggle,
|
||||
}: {
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}) => (
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
|
||||
enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
|
||||
enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar />
|
||||
<SettingsSidebar basePath="/agent/settings" />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
@@ -123,83 +31,7 @@ export default function NotificationsPage() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Email Notifications */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Email Notifications
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Manage your email notification preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{emailNotifications.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
{item.label}
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={item.enabled}
|
||||
onToggle={() => toggleEmailNotification(item.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Push Notifications */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Push Notifications
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Manage your push notification preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{pushNotifications.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
{item.label}
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={item.enabled}
|
||||
onToggle={() => togglePushNotification(item.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end">
|
||||
<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"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
<NotificationsForm onSave={handleSave} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,177 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { SettingsSidebar } from './component/SettingsSidebar';
|
||||
import { SettingsSidebar, ProfileSettingsForm } from '@/components/settings';
|
||||
|
||||
export default function ProfileSettingsPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: 'Brain Neeland',
|
||||
career: 'Real Estate Agent',
|
||||
email: 'Brain.Neeland1234@gmail.com',
|
||||
phone: '+917483849544',
|
||||
location: 'New York',
|
||||
});
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
console.log('Saving profile settings:', formData);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
console.log('Cancelling changes');
|
||||
const handleSave = (data: {
|
||||
fullName: string;
|
||||
career: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
location: string;
|
||||
}) => {
|
||||
console.log('Saving agent profile settings:', data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar
|
||||
name={formData.fullName}
|
||||
title={formData.career}
|
||||
/>
|
||||
<SettingsSidebar basePath="/agent/settings" />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
{/* Profile Settings Form */}
|
||||
<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="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: Service Area Location */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Service Area 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>
|
||||
<ProfileSettingsForm
|
||||
onSave={handleSave}
|
||||
descriptionText="This information will be displayed on your public agent page."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,41 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { SettingsSidebar } from '../component/SettingsSidebar';
|
||||
import { SettingsSidebar, PasswordSecurityForm } from '@/components/settings';
|
||||
|
||||
export default function PasswordSecurityPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
|
||||
const [showPasswords, setShowPasswords] = useState({
|
||||
current: false,
|
||||
new: false,
|
||||
confirm: false,
|
||||
});
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const toggleShowPassword = (field: 'current' | 'new' | 'confirm') => {
|
||||
setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] }));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (formData.newPassword !== formData.confirmPassword) {
|
||||
alert('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
console.log('Updating password');
|
||||
const handleSave = (data: { currentPassword: string; newPassword: string }) => {
|
||||
console.log('Updating agent password:', data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar />
|
||||
<SettingsSidebar basePath="/agent/settings" />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
@@ -46,119 +21,7 @@ export default function PasswordSecurityPage() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Password Form */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Change Password
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Ensure your account is using a strong password to stay secure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form Fields */}
|
||||
<div className="space-y-6 max-w-md">
|
||||
{/* Current Password */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Current Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPasswords.current ? 'text' : 'password'}
|
||||
value={formData.currentPassword}
|
||||
onChange={(e) => handleChange('currentPassword', e.target.value)}
|
||||
placeholder="Enter current password"
|
||||
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleShowPassword('current')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.current ? '🙈' : '👁️'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Password */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
New Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPasswords.new ? 'text' : 'password'}
|
||||
value={formData.newPassword}
|
||||
onChange={(e) => handleChange('newPassword', e.target.value)}
|
||||
placeholder="Enter new password"
|
||||
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleShowPassword('new')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.new ? '🙈' : '👁️'}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
|
||||
Minimum 8 characters with at least one uppercase, lowercase, and number
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Confirm New Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPasswords.confirm ? 'text' : 'password'}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) => handleChange('confirmPassword', e.target.value)}
|
||||
placeholder="Confirm new password"
|
||||
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleShowPassword('confirm')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.confirm ? '🙈' : '👁️'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="mt-8">
|
||||
<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"
|
||||
>
|
||||
Update Password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two-Factor Authentication Section */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Two-Factor Authentication
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Add an extra layer of security to your account
|
||||
</p>
|
||||
</div>
|
||||
<button className="px-6 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
|
||||
Enable 2FA
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<PasswordSecurityForm onSave={handleSave} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { SettingsSidebar } from '../component/SettingsSidebar';
|
||||
import { SettingsSidebar, PrivacyForm } from '@/components/settings';
|
||||
|
||||
interface PrivacySetting {
|
||||
id: string;
|
||||
@@ -12,93 +11,25 @@ interface PrivacySetting {
|
||||
}
|
||||
|
||||
export default function PrivacyPage() {
|
||||
const [privacySettings, setPrivacySettings] = useState<PrivacySetting[]>([
|
||||
{
|
||||
id: 'profile_visibility',
|
||||
label: 'Profile Visibility',
|
||||
description: 'Control who can see your profile',
|
||||
value: 'public',
|
||||
options: [
|
||||
{ value: 'public', label: 'Public' },
|
||||
{ value: 'connections', label: 'Connections Only' },
|
||||
{ value: 'private', label: 'Private' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'contact_info',
|
||||
label: 'Contact Information',
|
||||
description: 'Control who can see your contact details',
|
||||
value: 'connections',
|
||||
options: [
|
||||
{ value: 'public', label: 'Public' },
|
||||
{ value: 'connections', label: 'Connections Only' },
|
||||
{ value: 'private', label: 'Hidden' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'activity_status',
|
||||
label: 'Activity Status',
|
||||
description: 'Show when you are active on the platform',
|
||||
value: 'public',
|
||||
options: [
|
||||
{ value: 'public', label: 'Everyone' },
|
||||
{ value: 'connections', label: 'Connections Only' },
|
||||
{ value: 'private', label: 'No One' },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const [dataSettings, setDataSettings] = useState({
|
||||
shareAnalytics: true,
|
||||
personalizedAds: false,
|
||||
thirdPartySharing: false,
|
||||
});
|
||||
|
||||
const handlePrivacyChange = (id: string, value: string) => {
|
||||
setPrivacySettings((prev) =>
|
||||
prev.map((item) => (item.id === id ? { ...item, value } : item))
|
||||
);
|
||||
};
|
||||
|
||||
const handleDataSettingChange = (key: keyof typeof dataSettings) => {
|
||||
setDataSettings((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
console.log('Saving privacy settings:', { privacySettings, dataSettings });
|
||||
const handleSave = (data: {
|
||||
privacySettings: PrivacySetting[];
|
||||
dataSettings: {
|
||||
shareAnalytics: boolean;
|
||||
personalizedAds: boolean;
|
||||
thirdPartySharing: boolean;
|
||||
};
|
||||
}) => {
|
||||
console.log('Saving agent privacy settings:', data);
|
||||
};
|
||||
|
||||
const handleDeleteAccount = () => {
|
||||
if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
|
||||
console.log('Deleting account');
|
||||
}
|
||||
console.log('Agent account deletion requested');
|
||||
};
|
||||
|
||||
const ToggleSwitch = ({
|
||||
enabled,
|
||||
onToggle,
|
||||
}: {
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}) => (
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
|
||||
enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
|
||||
enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar />
|
||||
<SettingsSidebar basePath="/agent/settings" />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
@@ -109,146 +40,7 @@ export default function PrivacyPage() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Privacy Settings */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Privacy Settings
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Control your privacy and visibility preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{privacySettings.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="pb-4 border-b border-[#00293d]/10 last:border-0"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
{item.label}
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={item.value}
|
||||
onChange={(e) => handlePrivacyChange(item.id, e.target.value)}
|
||||
className="h-[36px] px-4 border border-[#00293D]/20 rounded-[10px] text-[13px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625] bg-white cursor-pointer"
|
||||
>
|
||||
{item.options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data & Personalization */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Data & Personalization
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Manage how your data is used
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Share Analytics
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Help improve our service by sharing usage data
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={dataSettings.shareAnalytics}
|
||||
onToggle={() => handleDataSettingChange('shareAnalytics')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Personalized Ads
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
See ads tailored to your interests
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={dataSettings.personalizedAds}
|
||||
onToggle={() => handleDataSettingChange('personalizedAds')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Third-Party Data Sharing
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Allow sharing data with third-party partners
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={dataSettings.thirdPartySharing}
|
||||
onToggle={() => handleDataSettingChange('thirdPartySharing')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<div className="border border-red-200 rounded-[15px] bg-red-50/50 p-6 mb-4">
|
||||
<div className="mb-4">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-red-600 mb-2">
|
||||
Danger Zone
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-red-600/70">
|
||||
Irreversible and destructive actions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Delete Account
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Permanently delete your account and all data
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleDeleteAccount}
|
||||
className="px-6 py-2 border border-red-500 text-red-500 rounded-[15px] font-serif text-[12px] hover:bg-red-50 transition-colors"
|
||||
>
|
||||
Delete Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end">
|
||||
<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"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
<PrivacyForm onSave={handleSave} onDeleteAccount={handleDeleteAccount} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
40
src/app/(user)/user/settings/notifications/page.tsx
Normal file
40
src/app/(user)/user/settings/notifications/page.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client';
|
||||
|
||||
import { SettingsSidebar, NotificationsForm } from '@/components/settings';
|
||||
|
||||
interface NotificationSetting {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export default function UserNotificationsPage() {
|
||||
const handleSave = (data: {
|
||||
emailNotifications: NotificationSetting[];
|
||||
pushNotifications: NotificationSetting[];
|
||||
}) => {
|
||||
console.log('Saving user notification settings:', data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar basePath="/user/settings" />
|
||||
|
||||
{/* 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]">
|
||||
Notifications
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<NotificationsForm onSave={handleSave} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/app/(user)/user/settings/page.tsx
Normal file
32
src/app/(user)/user/settings/page.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import { SettingsSidebar, ProfileSettingsForm } from '@/components/settings';
|
||||
|
||||
export default function UserProfileSettingsPage() {
|
||||
const handleSave = (data: {
|
||||
fullName: string;
|
||||
career: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
location: string;
|
||||
}) => {
|
||||
console.log('Saving user profile settings:', data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar basePath="/user/settings" />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
<ProfileSettingsForm
|
||||
onSave={handleSave}
|
||||
descriptionText="This information will be displayed on your public profile page."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
src/app/(user)/user/settings/password/page.tsx
Normal file
30
src/app/(user)/user/settings/password/page.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
'use client';
|
||||
|
||||
import { SettingsSidebar, PasswordSecurityForm } from '@/components/settings';
|
||||
|
||||
export default function UserPasswordSecurityPage() {
|
||||
const handleSave = (data: { currentPassword: string; newPassword: string }) => {
|
||||
console.log('Updating user password:', data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar basePath="/user/settings" />
|
||||
|
||||
{/* 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]">
|
||||
Password Security
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<PasswordSecurityForm onSave={handleSave} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/app/(user)/user/settings/privacy/page.tsx
Normal file
49
src/app/(user)/user/settings/privacy/page.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { SettingsSidebar, PrivacyForm } from '@/components/settings';
|
||||
|
||||
interface PrivacySetting {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
value: string;
|
||||
options: { value: string; label: string }[];
|
||||
}
|
||||
|
||||
export default function UserPrivacyPage() {
|
||||
const handleSave = (data: {
|
||||
privacySettings: PrivacySetting[];
|
||||
dataSettings: {
|
||||
shareAnalytics: boolean;
|
||||
personalizedAds: boolean;
|
||||
thirdPartySharing: boolean;
|
||||
};
|
||||
}) => {
|
||||
console.log('Saving user privacy settings:', data);
|
||||
};
|
||||
|
||||
const handleDeleteAccount = () => {
|
||||
console.log('User account deletion requested');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Left Sidebar */}
|
||||
<SettingsSidebar basePath="/user/settings" />
|
||||
|
||||
{/* 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]">
|
||||
Privacy
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<PrivacyForm onSave={handleSave} onDeleteAccount={handleDeleteAccount} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
245
src/app/about/page.tsx
Normal file
245
src/app/about/page.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { CommonHeader } from '@/components/layout/CommonHeader';
|
||||
import { Footer } from '@/components/layout/Footer';
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
name: 'Andrew',
|
||||
role: 'Founder & CEO',
|
||||
image: '/assets/images/professional-1.jpg',
|
||||
},
|
||||
{
|
||||
name: 'Thomas',
|
||||
role: 'Co-Founder',
|
||||
image: '/assets/images/professional-2.jpg',
|
||||
},
|
||||
{
|
||||
name: 'Darren',
|
||||
role: 'Advisor',
|
||||
image: '/assets/images/professional-3.jpg',
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: '/assets/icons/verified-badge-orange.svg',
|
||||
title: 'Verified Agents',
|
||||
description: 'Every agent is vetted and verified for credentials, experience, and customer feedback.',
|
||||
},
|
||||
{
|
||||
icon: '/assets/icons/shield-verified-icon.svg',
|
||||
title: 'Total Transparency',
|
||||
description: 'Access honest reviews, transaction history, and verified credentials before connecting.',
|
||||
},
|
||||
{
|
||||
icon: '/assets/icons/home-icon.svg',
|
||||
title: 'Simple Journey',
|
||||
description: 'From search to settlement, we make finding and working with agents effortless.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
|
||||
<CommonHeader />
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 w-full">
|
||||
{/* Hero Section */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
|
||||
<div className="text-center">
|
||||
{/* Mission Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 border border-[#00293d]/20 rounded-full mb-6">
|
||||
<Image
|
||||
src="/assets/icons/verified-badge-orange.svg"
|
||||
alt=""
|
||||
width={19}
|
||||
height={19}
|
||||
/>
|
||||
<span className="font-fractul font-medium text-[14px] text-[#00293d]">
|
||||
Our Mission
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<h1 className="font-fractul font-bold text-[32px] lg:text-[40px] text-[#00293d] leading-tight mb-6">
|
||||
Connecting You with Trusted Agents.
|
||||
</h1>
|
||||
|
||||
{/* Description */}
|
||||
<p className="font-serif text-[14px] text-[#00293d] leading-relaxed mb-8 max-w-[550px] mx-auto">
|
||||
We believe finding the right home shouldn't be complicated. Our platform bridges the gap between buyers, sellers, and verified real estate agents for a smooth and transparent experience.
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<Link
|
||||
href="/agents"
|
||||
className="inline-flex items-center justify-center w-[160px] h-[46px] border border-[#00293d] rounded-full font-fractul font-medium text-[14px] text-[#00293d] hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Find Your Agent
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Hero Image with Overlay Text */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
|
||||
<div className="relative rounded-[20px] overflow-hidden">
|
||||
<Image
|
||||
src="/assets/images/user_home_top.png"
|
||||
alt="City buildings"
|
||||
width={1200}
|
||||
height={500}
|
||||
className="w-full h-auto object-cover"
|
||||
priority
|
||||
/>
|
||||
{/* Overlay Text */}
|
||||
<div className="absolute bottom-6 left-6 lg:bottom-10 lg:left-10">
|
||||
<h2 className="font-fractul font-bold text-[20px] lg:text-[24px] text-[#00293d]">
|
||||
Building the future of property.
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center justify-center gap-16 lg:gap-32">
|
||||
<div className="text-center">
|
||||
<p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]">
|
||||
15k+
|
||||
</p>
|
||||
<p className="font-serif text-[14px] text-[#00293d]">
|
||||
Verified Agents
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]">
|
||||
98%
|
||||
</p>
|
||||
<p className="font-serif text-[14px] text-[#00293d]">
|
||||
Customer Satisfaction
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us Section */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-12">
|
||||
<span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full">
|
||||
Why Choose Us
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Feature Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Image
|
||||
src={feature.icon}
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="font-serif text-[14px] text-[#00293d] leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Section */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 lg:pb-20">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3">
|
||||
Meet the minds behind the platform.
|
||||
</h2>
|
||||
<p className="font-serif text-[14px] text-[#00293d] max-w-[500px] mx-auto">
|
||||
Our team is passionate about making real estate connections easier and more transparent for everyone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Team Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{teamMembers.map((member, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="w-[180px] h-[180px] rounded-full overflow-hidden mx-auto mb-4 border-4 border-[#e58625]/20">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
width={180}
|
||||
height={180}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-1">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="font-serif text-[14px] text-[#e58625]">
|
||||
{member.role}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
|
||||
<div className="max-w-4xl mx-auto border border-[#00293d]/20 rounded-[15px] p-8 lg:p-10">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-6">
|
||||
<div className="lg:max-w-[400px] text-center lg:text-left">
|
||||
<h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3">
|
||||
Ready to find an agent?
|
||||
</h2>
|
||||
<p className="font-serif text-[13px] text-[#00293d] mb-5">
|
||||
Discover trusted agents and start your property journey with confidence.
|
||||
</p>
|
||||
<Link
|
||||
href="/agents"
|
||||
className="inline-flex items-center gap-2 bg-[#e58625] text-white px-5 py-2.5 rounded-full font-fractul font-medium text-[13px] hover:bg-[#d47720] transition-colors"
|
||||
>
|
||||
Start Your Search
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-[140px] lg:w-[160px]">
|
||||
<Image
|
||||
src="/assets/images/agent-illustration.png"
|
||||
alt="Find an agent"
|
||||
width={160}
|
||||
height={160}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
203
src/components/settings/NotificationsForm.tsx
Normal file
203
src/components/settings/NotificationsForm.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface NotificationSetting {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
interface NotificationsFormProps {
|
||||
onSave?: (data: {
|
||||
emailNotifications: NotificationSetting[];
|
||||
pushNotifications: NotificationSetting[];
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export function NotificationsForm({ onSave }: NotificationsFormProps) {
|
||||
const [emailNotifications, setEmailNotifications] = useState<NotificationSetting[]>([
|
||||
{
|
||||
id: 'new_leads',
|
||||
label: 'New Leads',
|
||||
description: 'Get notified when you receive new leads',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'messages',
|
||||
label: 'Messages',
|
||||
description: 'Get notified when you receive new messages',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'connection_requests',
|
||||
label: 'Connection Requests',
|
||||
description: 'Get notified about new connection requests',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'property_updates',
|
||||
label: 'Property Updates',
|
||||
description: 'Get notified about property status changes',
|
||||
enabled: false,
|
||||
},
|
||||
{
|
||||
id: 'marketing',
|
||||
label: 'Marketing & Promotions',
|
||||
description: 'Receive marketing emails and promotions',
|
||||
enabled: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const [pushNotifications, setPushNotifications] = useState<NotificationSetting[]>([
|
||||
{
|
||||
id: 'push_messages',
|
||||
label: 'Messages',
|
||||
description: 'Push notifications for new messages',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'push_leads',
|
||||
label: 'New Leads',
|
||||
description: 'Push notifications for new leads',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'push_reminders',
|
||||
label: 'Reminders',
|
||||
description: 'Push notifications for scheduled reminders',
|
||||
enabled: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const toggleEmailNotification = (id: string) => {
|
||||
setEmailNotifications((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id ? { ...item, enabled: !item.enabled } : item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const togglePushNotification = (id: string) => {
|
||||
setPushNotifications((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id ? { ...item, enabled: !item.enabled } : item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (onSave) {
|
||||
onSave({ emailNotifications, pushNotifications });
|
||||
} else {
|
||||
console.log('Saving notification settings:', {
|
||||
emailNotifications,
|
||||
pushNotifications,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const ToggleSwitch = ({
|
||||
enabled,
|
||||
onToggle,
|
||||
}: {
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}) => (
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
|
||||
enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
|
||||
enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Email Notifications */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Email Notifications
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Manage your email notification preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{emailNotifications.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
{item.label}
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={item.enabled}
|
||||
onToggle={() => toggleEmailNotification(item.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Push Notifications */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Push Notifications
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Manage your push notification preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{pushNotifications.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
{item.label}
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={item.enabled}
|
||||
onToggle={() => togglePushNotification(item.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end">
|
||||
<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"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
159
src/components/settings/PasswordSecurityForm.tsx
Normal file
159
src/components/settings/PasswordSecurityForm.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface PasswordSecurityFormProps {
|
||||
onSave?: (data: { currentPassword: string; newPassword: string }) => void;
|
||||
}
|
||||
|
||||
export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
|
||||
const [showPasswords, setShowPasswords] = useState({
|
||||
current: false,
|
||||
new: false,
|
||||
confirm: false,
|
||||
});
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const toggleShowPassword = (field: 'current' | 'new' | 'confirm') => {
|
||||
setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] }));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (formData.newPassword !== formData.confirmPassword) {
|
||||
alert('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
if (onSave) {
|
||||
onSave({ currentPassword: formData.currentPassword, newPassword: formData.newPassword });
|
||||
} else {
|
||||
console.log('Updating password');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Password Form */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Change Password
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Ensure your account is using a strong password to stay secure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form Fields */}
|
||||
<div className="space-y-6 max-w-md">
|
||||
{/* Current Password */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Current Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPasswords.current ? 'text' : 'password'}
|
||||
value={formData.currentPassword}
|
||||
onChange={(e) => handleChange('currentPassword', e.target.value)}
|
||||
placeholder="Enter current password"
|
||||
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleShowPassword('current')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.current ? '🙈' : '👁️'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Password */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
New Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPasswords.new ? 'text' : 'password'}
|
||||
value={formData.newPassword}
|
||||
onChange={(e) => handleChange('newPassword', e.target.value)}
|
||||
placeholder="Enter new password"
|
||||
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleShowPassword('new')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.new ? '🙈' : '👁️'}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
|
||||
Minimum 8 characters with at least one uppercase, lowercase, and number
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
|
||||
Confirm New Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPasswords.confirm ? 'text' : 'password'}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) => handleChange('confirmPassword', e.target.value)}
|
||||
placeholder="Confirm new password"
|
||||
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleShowPassword('confirm')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.confirm ? '🙈' : '👁️'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="mt-8">
|
||||
<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"
|
||||
>
|
||||
Update Password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two-Factor Authentication Section */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Two-Factor Authentication
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Add an extra layer of security to your account
|
||||
</p>
|
||||
</div>
|
||||
<button className="px-6 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
|
||||
Enable 2FA
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
261
src/components/settings/PrivacyForm.tsx
Normal file
261
src/components/settings/PrivacyForm.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface PrivacySetting {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
value: string;
|
||||
options: { value: string; label: string }[];
|
||||
}
|
||||
|
||||
interface PrivacyFormProps {
|
||||
onSave?: (data: {
|
||||
privacySettings: PrivacySetting[];
|
||||
dataSettings: {
|
||||
shareAnalytics: boolean;
|
||||
personalizedAds: boolean;
|
||||
thirdPartySharing: boolean;
|
||||
};
|
||||
}) => void;
|
||||
onDeleteAccount?: () => void;
|
||||
}
|
||||
|
||||
export function PrivacyForm({ onSave, onDeleteAccount }: PrivacyFormProps) {
|
||||
const [privacySettings, setPrivacySettings] = useState<PrivacySetting[]>([
|
||||
{
|
||||
id: 'profile_visibility',
|
||||
label: 'Profile Visibility',
|
||||
description: 'Control who can see your profile',
|
||||
value: 'public',
|
||||
options: [
|
||||
{ value: 'public', label: 'Public' },
|
||||
{ value: 'connections', label: 'Connections Only' },
|
||||
{ value: 'private', label: 'Private' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'contact_info',
|
||||
label: 'Contact Information',
|
||||
description: 'Control who can see your contact details',
|
||||
value: 'connections',
|
||||
options: [
|
||||
{ value: 'public', label: 'Public' },
|
||||
{ value: 'connections', label: 'Connections Only' },
|
||||
{ value: 'private', label: 'Hidden' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'activity_status',
|
||||
label: 'Activity Status',
|
||||
description: 'Show when you are active on the platform',
|
||||
value: 'public',
|
||||
options: [
|
||||
{ value: 'public', label: 'Everyone' },
|
||||
{ value: 'connections', label: 'Connections Only' },
|
||||
{ value: 'private', label: 'No One' },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const [dataSettings, setDataSettings] = useState({
|
||||
shareAnalytics: true,
|
||||
personalizedAds: false,
|
||||
thirdPartySharing: false,
|
||||
});
|
||||
|
||||
const handlePrivacyChange = (id: string, value: string) => {
|
||||
setPrivacySettings((prev) =>
|
||||
prev.map((item) => (item.id === id ? { ...item, value } : item))
|
||||
);
|
||||
};
|
||||
|
||||
const handleDataSettingChange = (key: keyof typeof dataSettings) => {
|
||||
setDataSettings((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (onSave) {
|
||||
onSave({ privacySettings, dataSettings });
|
||||
} else {
|
||||
console.log('Saving privacy settings:', { privacySettings, dataSettings });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAccount = () => {
|
||||
if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
|
||||
if (onDeleteAccount) {
|
||||
onDeleteAccount();
|
||||
} else {
|
||||
console.log('Deleting account');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const ToggleSwitch = ({
|
||||
enabled,
|
||||
onToggle,
|
||||
}: {
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}) => (
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
|
||||
enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
|
||||
enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Privacy Settings */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Privacy Settings
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Control your privacy and visibility preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{privacySettings.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="pb-4 border-b border-[#00293d]/10 last:border-0"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
{item.label}
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={item.value}
|
||||
onChange={(e) => handlePrivacyChange(item.id, e.target.value)}
|
||||
className="h-[36px] px-4 border border-[#00293D]/20 rounded-[10px] text-[13px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625] bg-white cursor-pointer"
|
||||
>
|
||||
{item.options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data & Personalization */}
|
||||
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
|
||||
Data & Personalization
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Manage how your data is used
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Share Analytics
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Help improve our service by sharing usage data
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={dataSettings.shareAnalytics}
|
||||
onToggle={() => handleDataSettingChange('shareAnalytics')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-[#00293d]/10">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Personalized Ads
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
See ads tailored to your interests
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={dataSettings.personalizedAds}
|
||||
onToggle={() => handleDataSettingChange('personalizedAds')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Third-Party Data Sharing
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Allow sharing data with third-party partners
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
enabled={dataSettings.thirdPartySharing}
|
||||
onToggle={() => handleDataSettingChange('thirdPartySharing')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<div className="border border-red-200 rounded-[15px] bg-red-50/50 p-6 mb-4">
|
||||
<div className="mb-4">
|
||||
<h2 className="font-fractul font-bold text-[16px] text-red-600 mb-2">
|
||||
Danger Zone
|
||||
</h2>
|
||||
<p className="font-serif text-[12px] text-red-600/70">
|
||||
Irreversible and destructive actions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="font-serif font-medium text-[14px] text-[#00293D]">
|
||||
Delete Account
|
||||
</h3>
|
||||
<p className="font-serif text-[12px] text-[#00293D]/60">
|
||||
Permanently delete your account and all data
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleDeleteAccount}
|
||||
className="px-6 py-2 border border-red-500 text-red-500 rounded-[15px] font-serif text-[12px] hover:bg-red-50 transition-colors"
|
||||
>
|
||||
Delete Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end">
|
||||
<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"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
191
src/components/settings/ProfileSettingsForm.tsx
Normal file
191
src/components/settings/ProfileSettingsForm.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -10,42 +10,44 @@ interface NavItem {
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
label: 'Profile Settings',
|
||||
href: '/agent/settings',
|
||||
icon: '/assets/icons/settings-profile-icon.svg',
|
||||
},
|
||||
{
|
||||
label: 'Password Security',
|
||||
href: '/agent/settings/password',
|
||||
icon: '/assets/icons/settings-lock-icon.svg',
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
href: '/agent/settings/notifications',
|
||||
icon: '/assets/icons/settings-bell-icon.svg',
|
||||
},
|
||||
{
|
||||
label: 'Privacy',
|
||||
href: '/agent/settings/privacy',
|
||||
icon: '/assets/icons/settings-privacy-icon.svg',
|
||||
},
|
||||
];
|
||||
|
||||
interface SettingsSidebarProps {
|
||||
profileImage?: string;
|
||||
name?: string;
|
||||
title?: string;
|
||||
basePath?: '/agent/settings' | '/user/settings';
|
||||
}
|
||||
|
||||
export function SettingsSidebar({
|
||||
profileImage = '/assets/icons/user-placeholder-icon.svg',
|
||||
name = 'Brain Neeland',
|
||||
title = 'Top Real Estate Agent',
|
||||
basePath = '/agent/settings',
|
||||
}: SettingsSidebarProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
label: 'Profile Settings',
|
||||
href: basePath,
|
||||
icon: '/assets/icons/settings-profile-icon.svg',
|
||||
},
|
||||
{
|
||||
label: 'Password Security',
|
||||
href: `${basePath}/password`,
|
||||
icon: '/assets/icons/settings-lock-icon.svg',
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
href: `${basePath}/notifications`,
|
||||
icon: '/assets/icons/settings-bell-icon.svg',
|
||||
},
|
||||
{
|
||||
label: 'Privacy',
|
||||
href: `${basePath}/privacy`,
|
||||
icon: '/assets/icons/settings-privacy-icon.svg',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full lg:w-[300px] space-y-4">
|
||||
{/* Profile Card */}
|
||||
6
src/components/settings/index.ts
Normal file
6
src/components/settings/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
// Shared Settings Components
|
||||
export { SettingsSidebar } from './SettingsSidebar';
|
||||
export { ProfileSettingsForm } from './ProfileSettingsForm';
|
||||
export { PasswordSecurityForm } from './PasswordSecurityForm';
|
||||
export { NotificationsForm } from './NotificationsForm';
|
||||
export { PrivacyForm } from './PrivacyForm';
|
||||
Reference in New Issue
Block a user