hamid zarghami
92 lines
3.7 KiB
TypeScript
92 lines
3.7 KiB
TypeScript
import { FC, useState } from 'react'
|
||
import Input from '../../../components/Input'
|
||
import UploadBox from '../../../components/UploadBox'
|
||
import { Add, CloseCircle } from 'iconsax-react'
|
||
import Button from '../../../components/Button'
|
||
|
||
type Service = { title: string; image?: File; existingImageUrl?: string }
|
||
|
||
type Props = {
|
||
value: Service[]
|
||
onChange: (val: Service[]) => void
|
||
}
|
||
|
||
const CompanyServices: FC<Props> = ({ value, onChange }) => {
|
||
const [serviceTitle, setServiceTitle] = useState('')
|
||
const [serviceImage, setServiceImage] = useState<File | undefined>(undefined)
|
||
const [serviceError, setServiceError] = useState('')
|
||
|
||
const handleAddService = () => {
|
||
if (!serviceTitle.trim()) {
|
||
setServiceError('عنوان خدمت الزامی است')
|
||
return
|
||
}
|
||
if (!serviceImage) {
|
||
setServiceError('تصویر خدمت الزامی است')
|
||
return
|
||
}
|
||
if (value.some(s => s.title.trim() === serviceTitle.trim())) {
|
||
setServiceError('عنوان خدمت تکراری است')
|
||
return
|
||
}
|
||
onChange([...value, { title: serviceTitle.trim(), image: serviceImage }])
|
||
setServiceTitle('')
|
||
setServiceImage(undefined)
|
||
setServiceError('')
|
||
}
|
||
|
||
const handleRemoveService = (idx: number) => {
|
||
onChange(value.filter((_, i) => i !== idx))
|
||
}
|
||
|
||
return (
|
||
<div className='mt-8'>
|
||
<div className='mb-2'>خدمات شرکت</div>
|
||
<div className='rowTwoInput items-end gap-4'>
|
||
<div className='w-full'>
|
||
<Input
|
||
label='عنوان خدمت'
|
||
name='serviceTitle'
|
||
value={serviceTitle}
|
||
onChange={e => setServiceTitle(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className='w-full'>
|
||
<UploadBox
|
||
label='تصویر'
|
||
onChange={files => setServiceImage(files[0])}
|
||
isMultiple={false}
|
||
isReset={!serviceImage && !serviceTitle}
|
||
/>
|
||
</div>
|
||
<Button
|
||
onClick={handleAddService}
|
||
className='w-fit px-4 whitespace-nowrap'
|
||
>
|
||
<div className='flex gap-2'>
|
||
<Add size={22} color='white' />
|
||
<div>افزودن خدمت</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
{serviceError && <div className='text-xs text-red-600 mt-2'>{serviceError}</div>}
|
||
{/* نمایش لیست خدمات */}
|
||
<div className='mt-4 flex gap-2'>
|
||
{value.map((srv, idx) => (
|
||
<div key={idx} className='flex border p-2 rounded-xl items-center gap-2'>
|
||
<div className='flex items-center gap-2'>
|
||
{srv.image && <img src={URL.createObjectURL(srv.image)} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
|
||
{srv.existingImageUrl && !srv.image && <img src={srv.existingImageUrl} alt='' className='size-10 min-w-10 rounded-md object-cover' />}
|
||
</div>
|
||
<div className='w-full text-xs'>{srv.title}</div>
|
||
<button type='button' onClick={() => handleRemoveService(idx)} className='ml-auto'>
|
||
<CloseCircle size={16} color='red' />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CompanyServices
|