530 lines
35 KiB
TypeScript
530 lines
35 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { User, Mail, Phone, MapPin, Lock, Bell, Palette, Globe, Save, Camera } from 'lucide-react';
|
|
import { Button } from '../components/Button';
|
|
|
|
export const SettingsPage: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState<'profile' | 'account' | 'notifications' | 'appearance'>('profile');
|
|
const [profileData, setProfileData] = useState({
|
|
name: 'João Silva',
|
|
email: 'joao.silva@photum.com',
|
|
phone: '(41) 99999-0000',
|
|
location: 'Curitiba, PR',
|
|
bio: 'Fotógrafo profissional especializado em eventos e formaturas há mais de 10 anos.',
|
|
avatar: 'https://i.pravatar.cc/150?img=68'
|
|
});
|
|
|
|
const [notificationSettings, setNotificationSettings] = useState({
|
|
emailNotifications: true,
|
|
pushNotifications: true,
|
|
smsNotifications: false,
|
|
eventReminders: true,
|
|
paymentAlerts: true,
|
|
teamUpdates: false
|
|
});
|
|
|
|
const [appearanceSettings, setAppearanceSettings] = useState({
|
|
theme: 'light',
|
|
language: 'pt-BR',
|
|
dateFormat: 'DD/MM/YYYY',
|
|
currency: 'BRL'
|
|
});
|
|
|
|
const handleSaveProfile = () => {
|
|
alert('Perfil atualizado com sucesso!');
|
|
};
|
|
|
|
const handleSaveNotifications = () => {
|
|
alert('Configurações de notificações salvas!');
|
|
};
|
|
|
|
const handleSaveAppearance = () => {
|
|
alert('Configurações de aparência salvas!');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-8 sm:pb-12">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<div className="mb-6 sm:mb-8">
|
|
<h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black mb-2">
|
|
Configurações
|
|
</h1>
|
|
<p className="text-sm sm:text-base text-gray-600">
|
|
Gerencie suas preferências e informações da conta
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
{/* Mobile Tabs - Horizontal */}
|
|
<div className="lg:hidden">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2">
|
|
<nav className="flex overflow-x-auto gap-1 scrollbar-hide">
|
|
<button
|
|
onClick={() => setActiveTab('profile')}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'profile'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<User size={18} />
|
|
<span className="font-medium">Perfil</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('account')}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'account'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<Lock size={18} />
|
|
<span className="font-medium">Conta</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('notifications')}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'notifications'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<Bell size={18} />
|
|
<span className="font-medium">Notificações</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('appearance')}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'appearance'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<Palette size={18} />
|
|
<span className="font-medium">Aparência</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Sidebar - Vertical */}
|
|
<div className="hidden lg:block lg:col-span-1">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<nav className="space-y-1">
|
|
<button
|
|
onClick={() => setActiveTab('profile')}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'profile'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<User size={20} />
|
|
<span className="font-medium">Perfil</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('account')}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'account'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<Lock size={20} />
|
|
<span className="font-medium">Conta</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('notifications')}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'notifications'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<Bell size={20} />
|
|
<span className="font-medium">Notificações</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('appearance')}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'appearance'
|
|
? 'bg-brand-gold text-white'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<Palette size={20} />
|
|
<span className="font-medium">Aparência</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="lg:col-span-3">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 md:p-8">
|
|
{/* Profile Tab */}
|
|
{activeTab === 'profile' && (
|
|
<div>
|
|
<h2 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">Informações do Perfil</h2>
|
|
|
|
<div className="mb-6 sm:mb-8">
|
|
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
|
|
<div className="relative">
|
|
<img
|
|
src={profileData.avatar}
|
|
alt="Avatar"
|
|
className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
|
|
/>
|
|
<button className="absolute bottom-0 right-0 w-7 h-7 sm:w-8 sm:h-8 bg-brand-gold text-white rounded-full flex items-center justify-center hover:bg-[#a5bd2e] transition-colors">
|
|
<Camera size={14} className="sm:w-4 sm:h-4" />
|
|
</button>
|
|
</div>
|
|
<div className="text-center sm:text-left">
|
|
<h3 className="font-semibold text-base sm:text-lg">{profileData.name}</h3>
|
|
<p className="text-xs sm:text-sm text-gray-600">{profileData.email}</p>
|
|
<button className="text-xs sm:text-sm text-brand-gold hover:underline mt-1">
|
|
Alterar foto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Nome Completo
|
|
</label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
type="text"
|
|
value={profileData.name}
|
|
onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
|
|
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Email
|
|
</label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
type="email"
|
|
value={profileData.email}
|
|
onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
|
|
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Telefone
|
|
</label>
|
|
<div className="relative">
|
|
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
type="tel"
|
|
value={profileData.phone}
|
|
onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
|
|
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Localização
|
|
</label>
|
|
<div className="relative">
|
|
<MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
type="text"
|
|
value={profileData.location}
|
|
onChange={(e) => setProfileData({ ...profileData, location: e.target.value })}
|
|
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Biografia
|
|
</label>
|
|
<textarea
|
|
value={profileData.bio}
|
|
onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
|
|
rows={4}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<Button size="lg" variant="secondary" onClick={handleSaveProfile}>
|
|
<Save size={20} className="mr-2" />
|
|
Salvar Alterações
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Account Tab */}
|
|
{activeTab === 'account' && (
|
|
<div>
|
|
<h2 className="text-2xl font-semibold mb-6">Segurança da Conta</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Senha Atual
|
|
</label>
|
|
<input
|
|
type="password"
|
|
placeholder="Digite sua senha atual"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Nova Senha
|
|
</label>
|
|
<input
|
|
type="password"
|
|
placeholder="Digite sua nova senha"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Confirmar Nova Senha
|
|
</label>
|
|
<input
|
|
type="password"
|
|
placeholder="Confirme sua nova senha"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<Button size="lg" variant="secondary">
|
|
<Lock size={20} className="mr-2" />
|
|
Atualizar Senha
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="pt-8 border-t border-gray-200">
|
|
<h3 className="text-lg font-semibold mb-4">Autenticação em Dois Fatores</h3>
|
|
<p className="text-gray-600 mb-4">
|
|
Adicione uma camada extra de segurança à sua conta
|
|
</p>
|
|
<Button size="md" variant="outline">
|
|
Ativar 2FA
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Notifications Tab */}
|
|
{activeTab === 'notifications' && (
|
|
<div>
|
|
<h2 className="text-2xl font-semibold mb-6">Preferências de Notificações</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
|
<div>
|
|
<h3 className="font-medium">Notificações por Email</h3>
|
|
<p className="text-sm text-gray-600">Receba atualizações por email</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notificationSettings.emailNotifications}
|
|
onChange={(e) => setNotificationSettings({
|
|
...notificationSettings,
|
|
emailNotifications: e.target.checked
|
|
})}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
|
<div>
|
|
<h3 className="font-medium">Notificações Push</h3>
|
|
<p className="text-sm text-gray-600">Receba notificações no navegador</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notificationSettings.pushNotifications}
|
|
onChange={(e) => setNotificationSettings({
|
|
...notificationSettings,
|
|
pushNotifications: e.target.checked
|
|
})}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
|
<div>
|
|
<h3 className="font-medium">SMS</h3>
|
|
<p className="text-sm text-gray-600">Receba mensagens de texto</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notificationSettings.smsNotifications}
|
|
onChange={(e) => setNotificationSettings({
|
|
...notificationSettings,
|
|
smsNotifications: e.target.checked
|
|
})}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
|
<div>
|
|
<h3 className="font-medium">Lembretes de Eventos</h3>
|
|
<p className="text-sm text-gray-600">Receba lembretes antes dos eventos</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notificationSettings.eventReminders}
|
|
onChange={(e) => setNotificationSettings({
|
|
...notificationSettings,
|
|
eventReminders: e.target.checked
|
|
})}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
|
<div>
|
|
<h3 className="font-medium">Alertas de Pagamento</h3>
|
|
<p className="text-sm text-gray-600">Notificações sobre pagamentos</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notificationSettings.paymentAlerts}
|
|
onChange={(e) => setNotificationSettings({
|
|
...notificationSettings,
|
|
paymentAlerts: e.target.checked
|
|
})}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<Button size="lg" variant="secondary" onClick={handleSaveNotifications}>
|
|
<Save size={20} className="mr-2" />
|
|
Salvar Preferências
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Appearance Tab */}
|
|
{activeTab === 'appearance' && (
|
|
<div>
|
|
<h2 className="text-2xl font-semibold mb-6">Aparência e Idioma</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Tema
|
|
</label>
|
|
<select
|
|
value={appearanceSettings.theme}
|
|
onChange={(e) => setAppearanceSettings({
|
|
...appearanceSettings,
|
|
theme: e.target.value
|
|
})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
>
|
|
<option value="light">Claro</option>
|
|
<option value="dark">Escuro</option>
|
|
<option value="auto">Automático</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Idioma
|
|
</label>
|
|
<select
|
|
value={appearanceSettings.language}
|
|
onChange={(e) => setAppearanceSettings({
|
|
...appearanceSettings,
|
|
language: e.target.value
|
|
})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
>
|
|
<option value="pt-BR">Português (Brasil)</option>
|
|
<option value="en-US">English (US)</option>
|
|
<option value="es-ES">Español</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Formato de Data
|
|
</label>
|
|
<select
|
|
value={appearanceSettings.dateFormat}
|
|
onChange={(e) => setAppearanceSettings({
|
|
...appearanceSettings,
|
|
dateFormat: e.target.value
|
|
})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
>
|
|
<option value="DD/MM/YYYY">DD/MM/YYYY</option>
|
|
<option value="MM/DD/YYYY">MM/DD/YYYY</option>
|
|
<option value="YYYY-MM-DD">YYYY-MM-DD</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Moeda
|
|
</label>
|
|
<select
|
|
value={appearanceSettings.currency}
|
|
onChange={(e) => setAppearanceSettings({
|
|
...appearanceSettings,
|
|
currency: e.target.value
|
|
})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
|
>
|
|
<option value="BRL">Real (R$)</option>
|
|
<option value="USD">Dólar ($)</option>
|
|
<option value="EUR">Euro (€)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<Button size="lg" variant="secondary" onClick={handleSaveAppearance}>
|
|
<Save size={20} className="mr-2" />
|
|
Salvar Configurações
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|