fix build
This commit is contained in:
hamid zarghami
@@ -0,0 +1,244 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Add, Edit2, Trash } from 'iconsax-react'
|
||||
|
||||
interface EmailAddress {
|
||||
id: number
|
||||
email: string
|
||||
name: string
|
||||
isPrimary: boolean
|
||||
}
|
||||
|
||||
const Address: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [addresses, setAddresses] = useState<EmailAddress[]>([
|
||||
{ id: 1, email: 'user@example.com', name: 'Main Account', isPrimary: true }
|
||||
])
|
||||
const [showAddForm, setShowAddForm] = useState(false)
|
||||
const [newEmail, setNewEmail] = useState('')
|
||||
const [newName, setNewName] = useState('')
|
||||
const [editingId, setEditingId] = useState<number | null>(null)
|
||||
|
||||
const handleAddAddress = () => {
|
||||
if (newEmail && newName) {
|
||||
const newId = addresses.length > 0 ? Math.max(...addresses.map(a => a.id)) + 1 : 1
|
||||
setAddresses([...addresses, {
|
||||
id: newId,
|
||||
email: newEmail,
|
||||
name: newName,
|
||||
isPrimary: addresses.length === 0
|
||||
}])
|
||||
setNewEmail('')
|
||||
setNewName('')
|
||||
setShowAddForm(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditStart = (address: EmailAddress) => {
|
||||
setEditingId(address.id)
|
||||
setNewEmail(address.email)
|
||||
setNewName(address.name)
|
||||
}
|
||||
|
||||
const handleEditSave = () => {
|
||||
if (editingId && newEmail && newName) {
|
||||
setAddresses(addresses.map(addr =>
|
||||
addr.id === editingId
|
||||
? { ...addr, email: newEmail, name: newName }
|
||||
: addr
|
||||
))
|
||||
setEditingId(null)
|
||||
setNewEmail('')
|
||||
setNewName('')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSetPrimary = (id: number) => {
|
||||
setAddresses(addresses.map(addr => ({
|
||||
...addr,
|
||||
isPrimary: addr.id === id
|
||||
})))
|
||||
}
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
const filteredAddresses = addresses.filter(addr => addr.id !== id)
|
||||
// If we're deleting the primary address, make the first one primary
|
||||
if (addresses.find(addr => addr.id === id)?.isPrimary && filteredAddresses.length > 0) {
|
||||
filteredAddresses[0].isPrimary = true
|
||||
}
|
||||
setAddresses(filteredAddresses)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='bg-white rounded-4xl p-8'>
|
||||
<div className='flex justify-between mb-8'>
|
||||
<h2 className='text-xl font-semibold'>{t('setting.address')}</h2>
|
||||
<button className='bg-primary text-white px-6 py-2 rounded-lg'>{t('common.save')}</button>
|
||||
</div>
|
||||
|
||||
<div className='mb-6'>
|
||||
<div className='flex justify-between items-center mb-4'>
|
||||
<h3 className='text-md font-medium'>{t('setting.email_addresses')}</h3>
|
||||
{!showAddForm && (
|
||||
<button
|
||||
onClick={() => setShowAddForm(true)}
|
||||
className='flex items-center gap-1 text-primary'
|
||||
>
|
||||
<Add size={18} />
|
||||
<span>{t('setting.add_address')}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showAddForm && (
|
||||
<div className='p-4 bg-gray-50 rounded-lg mb-4'>
|
||||
<h4 className='font-medium mb-3'>{t('setting.new_address')}</h4>
|
||||
<div className='grid grid-cols-1 gap-4 mb-4'>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.email')}</label>
|
||||
<input
|
||||
type="email"
|
||||
value={newEmail}
|
||||
onChange={(e) => setNewEmail(e.target.value)}
|
||||
className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
|
||||
placeholder='email@domain.com'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.display_name')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
|
||||
placeholder={t('setting.display_name_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-end gap-2'>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowAddForm(false)
|
||||
setNewEmail('')
|
||||
setNewName('')
|
||||
}}
|
||||
className='px-4 py-2 border border-gray-300 rounded-lg'
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAddAddress}
|
||||
disabled={!newEmail || !newName}
|
||||
className={`px-4 py-2 rounded-lg ${!newEmail || !newName ? 'bg-gray-300 text-gray-500' : 'bg-primary text-white'}`}
|
||||
>
|
||||
{t('common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='space-y-3'>
|
||||
{addresses.map((address) => (
|
||||
<div key={address.id} className='p-4 bg-gray-50 rounded-lg'>
|
||||
{editingId === address.id ? (
|
||||
<div className='grid grid-cols-1 gap-4 mb-4'>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.email')}</label>
|
||||
<input
|
||||
type="email"
|
||||
value={newEmail}
|
||||
onChange={(e) => setNewEmail(e.target.value)}
|
||||
className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.display_name')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-end gap-2'>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingId(null)
|
||||
setNewEmail('')
|
||||
setNewName('')
|
||||
}}
|
||||
className='px-4 py-2 border border-gray-300 rounded-lg'
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleEditSave}
|
||||
disabled={!newEmail || !newName}
|
||||
className={`px-4 py-2 rounded-lg ${!newEmail || !newName ? 'bg-gray-300 text-gray-500' : 'bg-primary text-white'}`}
|
||||
>
|
||||
{t('common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='flex items-center justify-between'>
|
||||
<div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<p className='font-medium'>{address.name}</p>
|
||||
{address.isPrimary && (
|
||||
<span className='px-2 py-0.5 bg-green-100 text-green-600 text-xs rounded-full'>
|
||||
{t('setting.primary')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className='text-gray-500'>{address.email}</p>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
{!address.isPrimary && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleSetPrimary(address.id)}
|
||||
className='text-blue-600 px-3 py-1 text-sm'
|
||||
>
|
||||
{t('setting.set_primary')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEditStart(address)}
|
||||
className='text-gray-500'
|
||||
>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(address.id)}
|
||||
className='text-gray-500'
|
||||
>
|
||||
<Trash size={18} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='p-4 bg-yellow-50 rounded-lg border border-yellow-100'>
|
||||
<div className='flex items-start gap-3'>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#F59E0B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 8V13" stroke="#F59E0B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.9941 16H12.0031" stroke="#F59E0B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<div>
|
||||
<h4 className='font-medium text-yellow-800'>{t('setting.verification_required')}</h4>
|
||||
<p className='text-sm text-yellow-700 mt-1'>{t('setting.verification_note')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Address
|
||||
Reference in New Issue
Block a user