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';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { SettingsSidebar, NotificationsForm } from '@/components/settings';
|
||||||
import { SettingsSidebar } from '../component/SettingsSidebar';
|
|
||||||
|
|
||||||
interface NotificationSetting {
|
interface NotificationSetting {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -11,108 +10,17 @@ interface NotificationSetting {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function NotificationsPage() {
|
export default function NotificationsPage() {
|
||||||
const [emailNotifications, setEmailNotifications] = useState<NotificationSetting[]>([
|
const handleSave = (data: {
|
||||||
{
|
emailNotifications: NotificationSetting[];
|
||||||
id: 'new_leads',
|
pushNotifications: NotificationSetting[];
|
||||||
label: 'New Leads',
|
}) => {
|
||||||
description: 'Get notified when you receive new leads',
|
console.log('Saving agent notification settings:', data);
|
||||||
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 = () => {
|
|
||||||
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 (
|
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 basePath="/agent/settings" />
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
@@ -123,83 +31,7 @@ export default function NotificationsPage() {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Email Notifications */}
|
<NotificationsForm onSave={handleSave} />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,177 +1,29 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { SettingsSidebar, ProfileSettingsForm } from '@/components/settings';
|
||||||
import Image from 'next/image';
|
|
||||||
import { SettingsSidebar } from './component/SettingsSidebar';
|
|
||||||
|
|
||||||
export default function ProfileSettingsPage() {
|
export default function ProfileSettingsPage() {
|
||||||
const [formData, setFormData] = useState({
|
const handleSave = (data: {
|
||||||
fullName: 'Brain Neeland',
|
fullName: string;
|
||||||
career: 'Real Estate Agent',
|
career: string;
|
||||||
email: 'Brain.Neeland1234@gmail.com',
|
email: string;
|
||||||
phone: '+917483849544',
|
phone: string;
|
||||||
location: 'New York',
|
location: string;
|
||||||
});
|
}) => {
|
||||||
|
console.log('Saving agent profile settings:', data);
|
||||||
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');
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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 basePath="/agent/settings" />
|
||||||
name={formData.fullName}
|
|
||||||
title={formData.career}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
{/* Profile Settings Form */}
|
<ProfileSettingsForm
|
||||||
<div className="border border-[#00293d]/20 rounded-[15px] bg-white p-8">
|
onSave={handleSave}
|
||||||
{/* Header */}
|
descriptionText="This information will be displayed on your public agent page."
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,41 +1,16 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { SettingsSidebar, PasswordSecurityForm } from '@/components/settings';
|
||||||
import { SettingsSidebar } from '../component/SettingsSidebar';
|
|
||||||
|
|
||||||
export default function PasswordSecurityPage() {
|
export default function PasswordSecurityPage() {
|
||||||
const [formData, setFormData] = useState({
|
const handleSave = (data: { currentPassword: string; newPassword: string }) => {
|
||||||
currentPassword: '',
|
console.log('Updating agent password:', data);
|
||||||
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');
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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 basePath="/agent/settings" />
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
@@ -46,119 +21,7 @@ export default function PasswordSecurityPage() {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Password Form */}
|
<PasswordSecurityForm onSave={handleSave} />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { SettingsSidebar, PrivacyForm } from '@/components/settings';
|
||||||
import { SettingsSidebar } from '../component/SettingsSidebar';
|
|
||||||
|
|
||||||
interface PrivacySetting {
|
interface PrivacySetting {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -12,93 +11,25 @@ interface PrivacySetting {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function PrivacyPage() {
|
export default function PrivacyPage() {
|
||||||
const [privacySettings, setPrivacySettings] = useState<PrivacySetting[]>([
|
const handleSave = (data: {
|
||||||
{
|
privacySettings: PrivacySetting[];
|
||||||
id: 'profile_visibility',
|
dataSettings: {
|
||||||
label: 'Profile Visibility',
|
shareAnalytics: boolean;
|
||||||
description: 'Control who can see your profile',
|
personalizedAds: boolean;
|
||||||
value: 'public',
|
thirdPartySharing: boolean;
|
||||||
options: [
|
};
|
||||||
{ value: 'public', label: 'Public' },
|
}) => {
|
||||||
{ value: 'connections', label: 'Connections Only' },
|
console.log('Saving agent privacy settings:', data);
|
||||||
{ 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 handleDeleteAccount = () => {
|
const handleDeleteAccount = () => {
|
||||||
if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
|
console.log('Agent account deletion requested');
|
||||||
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 (
|
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 basePath="/agent/settings" />
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
@@ -109,146 +40,7 @@ export default function PrivacyPage() {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Privacy Settings */}
|
<PrivacyForm onSave={handleSave} onDeleteAccount={handleDeleteAccount} />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</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;
|
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 {
|
interface SettingsSidebarProps {
|
||||||
profileImage?: string;
|
profileImage?: string;
|
||||||
name?: string;
|
name?: string;
|
||||||
title?: string;
|
title?: string;
|
||||||
|
basePath?: '/agent/settings' | '/user/settings';
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SettingsSidebar({
|
export function SettingsSidebar({
|
||||||
profileImage = '/assets/icons/user-placeholder-icon.svg',
|
profileImage = '/assets/icons/user-placeholder-icon.svg',
|
||||||
name = 'Brain Neeland',
|
name = 'Brain Neeland',
|
||||||
title = 'Top Real Estate Agent',
|
title = 'Top Real Estate Agent',
|
||||||
|
basePath = '/agent/settings',
|
||||||
}: SettingsSidebarProps) {
|
}: SettingsSidebarProps) {
|
||||||
const pathname = usePathname();
|
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 (
|
return (
|
||||||
<div className="w-full lg:w-[300px] space-y-4">
|
<div className="w-full lg:w-[300px] space-y-4">
|
||||||
{/* Profile Card */}
|
{/* 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