hamid zarghami
78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
import { type FC } from 'react'
|
||
import { Location } from 'iconsax-react'
|
||
import type { UserSavedAddress } from '@/pages/customers/types/Types'
|
||
|
||
interface CreateOrderAddressSelectorProps {
|
||
addresses: UserSavedAddress[]
|
||
selectedAddressId: string | null
|
||
onSelectAddress: (address: UserSavedAddress) => void
|
||
onSelectManual: () => void
|
||
}
|
||
|
||
const CreateOrderAddressSelector: FC<CreateOrderAddressSelectorProps> = ({
|
||
addresses,
|
||
selectedAddressId,
|
||
onSelectAddress,
|
||
onSelectManual,
|
||
}) => {
|
||
if (addresses.length === 0) {
|
||
return null
|
||
}
|
||
|
||
const isManualSelected = selectedAddressId === null
|
||
|
||
return (
|
||
<div className='mb-6'>
|
||
<div className='text-sm mb-3'>انتخاب آدرس ذخیرهشده</div>
|
||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
|
||
{addresses.map((address) => {
|
||
const isSelected = selectedAddressId === address.id
|
||
|
||
return (
|
||
<button
|
||
key={address.id}
|
||
type='button'
|
||
onClick={() => onSelectAddress(address)}
|
||
className={`text-right p-4 rounded-xl border transition-colors ${
|
||
isSelected
|
||
? 'border-primary bg-primary/5'
|
||
: 'border-border hover:border-primary/40'
|
||
}`}
|
||
>
|
||
<div className='flex items-center justify-between gap-2'>
|
||
<div className='text-sm font-medium'>{address.title || 'آدرس'}</div>
|
||
{address.isDefault && (
|
||
<span className='text-[10px] px-2 py-0.5 rounded-full bg-primary/10 text-primary'>
|
||
پیشفرض
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className='text-xs mt-2 line-clamp-2'>{address.address}</div>
|
||
</button>
|
||
)
|
||
})}
|
||
|
||
<button
|
||
type='button'
|
||
onClick={onSelectManual}
|
||
className={`text-right p-4 rounded-xl border transition-colors ${
|
||
isManualSelected
|
||
? 'border-primary bg-primary/5'
|
||
: 'border-border hover:border-primary/40'
|
||
}`}
|
||
>
|
||
<div className='flex items-center gap-2 text-sm font-medium'>
|
||
<Location size={16} color='#000' />
|
||
<span>ورود آدرس جدید</span>
|
||
</div>
|
||
<div className='text-xs text-description mt-1'>
|
||
آدرس را بهصورت دستی وارد کنید
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CreateOrderAddressSelector
|