feat: Introduce shared settings components, implement user settings pages, and refactor agent settings pages to utilize them.
This commit is contained in:
pradeepkumar
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>
|
||||
);
|
||||
}
|
||||
130
src/components/settings/SettingsSidebar.tsx
Normal file
130
src/components/settings/SettingsSidebar.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
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 */}
|
||||
<div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0">
|
||||
<Image
|
||||
src={profileImage}
|
||||
alt={name}
|
||||
width={70}
|
||||
height={70}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
|
||||
{name}
|
||||
</h3>
|
||||
<p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories Card */}
|
||||
<div className="bg-white rounded-[15px] border border-[#00293D]/20 overflow-hidden">
|
||||
{/* Categories Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-[#00293D]/10">
|
||||
<h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
|
||||
Categories
|
||||
</h4>
|
||||
<Image
|
||||
src="/assets/icons/chevron-right-icon.svg"
|
||||
alt="Expand"
|
||||
width={8}
|
||||
height={14}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Navigation Items */}
|
||||
<nav className="py-2">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-4 py-3 px-5 transition-colors cursor-pointer ${
|
||||
isActive
|
||||
? 'bg-[#e58625]'
|
||||
: 'hover:bg-[#00293d]/5'
|
||||
}`}
|
||||
>
|
||||
<div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
|
||||
<Image
|
||||
src={item.icon}
|
||||
alt={item.label}
|
||||
width={20}
|
||||
height={20}
|
||||
style={isActive ? { filter: 'brightness(0) invert(1)' } : { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' }}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className={`font-serif text-[14px] leading-[19px] ${
|
||||
isActive
|
||||
? 'font-medium text-white'
|
||||
: 'font-normal text-[#00293D]'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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