create request company

2025-05-19 14:59:49 +03:30
parent 2fbdf05a25
commit f7e4548c96
14 changed files with 677 additions and 24 deletions
@@ -0,0 +1,92 @@
+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-6 min-w-6 rounded-full object-cover' />}
+                            {srv.existingImageUrl && !srv.image && <img src={srv.existingImageUrl} alt='' className='size-6 min-w-6 rounded-full 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