setting
This commit is contained in:
hamid zarghami
@@ -1,244 +1,187 @@
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import Table from '@/components/Table'
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { ColumnType } from '@/components/types/TableTypes'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Add, Edit2, Trash } from 'iconsax-react'
|
||||
import Button from '@/components/Button'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
|
||||
interface EmailAddress {
|
||||
interface AddressData extends Record<string, unknown> {
|
||||
id: number
|
||||
title: string
|
||||
email: string
|
||||
name: string
|
||||
isPrimary: boolean
|
||||
status: boolean
|
||||
}
|
||||
|
||||
const Address: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [addresses, setAddresses] = useState<EmailAddress[]>([
|
||||
{ id: 1, email: 'user@example.com', name: 'Main Account', isPrimary: true }
|
||||
const [addresses] = useState<AddressData[]>([
|
||||
{
|
||||
id: 1,
|
||||
title: 'بازاریابی',
|
||||
email: 'Marketing@example.com',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'بازاریابی',
|
||||
email: 'Marketing@example.com',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'بازاریابی',
|
||||
email: 'Marketing@example.com',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'بازاریابی',
|
||||
email: 'Marketing@example.com',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'بازاریابی',
|
||||
email: 'Marketing@example.com',
|
||||
status: 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 columns: ColumnType<AddressData>[] = [
|
||||
{
|
||||
title: t('setting.address_title'),
|
||||
key: 'title',
|
||||
width: '200px'
|
||||
},
|
||||
{
|
||||
title: t('setting.email'),
|
||||
key: 'email',
|
||||
width: '300px'
|
||||
},
|
||||
{
|
||||
title: t('setting.status'),
|
||||
key: 'status',
|
||||
width: '120px',
|
||||
align: 'center',
|
||||
render: (item: AddressData) => (
|
||||
<div key={item.id} className='dltr flex justify-end'>
|
||||
<Switch />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
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)
|
||||
}
|
||||
const statusOptions = [
|
||||
{ value: 'all', label: 'همه' },
|
||||
{ value: 'active', label: t('setting.active') },
|
||||
{ value: 'inactive', label: t('setting.inactive') }
|
||||
]
|
||||
|
||||
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 className='flex gap-8 mt-8'>
|
||||
<div className='flex-1'>
|
||||
<div className='flex justify-between'>
|
||||
<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>
|
||||
<Select
|
||||
placeholder={t('setting.status')}
|
||||
items={statusOptions}
|
||||
className='w-[120px]'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('setting.search')}
|
||||
className='w-[300px]'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={addresses}
|
||||
pagination={{
|
||||
currentPage: 1,
|
||||
totalPages: 6,
|
||||
onPageChange: (page) => console.log('Page:', page)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='w-[350px] bg-white rounded-4xl p-8'>
|
||||
<div>
|
||||
{t('setting.add_address')}
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex items-center justify-between'>
|
||||
<div>
|
||||
{t('setting.status')}
|
||||
</div>
|
||||
<div className='dltr pt-2'>
|
||||
<Switch />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('setting.domain1')}
|
||||
value={'example.com'}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('setting.title')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 relative'>
|
||||
<Input
|
||||
label={t('setting.username')}
|
||||
className='text-left'
|
||||
/>
|
||||
<div className='absolute flex items-center dltr text-xs z-10 right-[1px] top-[29px] rounded-r-2.5 h-[38px] bg-[#EBEEF5] px-3'>
|
||||
@ example.com
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('setting.password')}
|
||||
type='password'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-2 text-xs'>
|
||||
<div>رمز عبور میبایست:</div>
|
||||
<ul className='list-disc pr-3 mt-1 flex flex-col gap-1'>
|
||||
<li>حداقل ۸ کاراکتر باشد</li>
|
||||
<li>ترکیبی از حروف کوچک و بزرگ باشد</li>
|
||||
<li>شامل اعداد باشد</li>
|
||||
<li>شامل کاراکتر های خاص (نماد ها) باشد</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='mt-9 flex justify-end'>
|
||||
<Button
|
||||
className='w-fit px-20'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('setting.create')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Address
|
||||
export default Address
|
||||
Reference in New Issue
Block a user