uploader template

2025-07-16 20:51:15 +03:30
parent 2043daae39
commit 6f640a80a7
12 changed files with 490 additions and 119 deletions
@@ -0,0 +1,111 @@
+import { FC, useState } from 'react'
+import Input from '@/components/Input'
+import Button from '@/components/Button'
+import { Add, Trash } from 'iconsax-react'
+import { toast } from '@/components/Toast'
+
+interface ForwarderManagerProps {
+    forwarders: string[]
+    onChange: (forwarders: string[]) => void
+    error?: string
+}
+
+const ForwarderManager: FC<ForwarderManagerProps> = ({ forwarders, onChange, error }) => {
+    const [newForwarder, setNewForwarder] = useState('')
+
+    const validateEmail = (email: string): boolean => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+        return emailRegex.test(email)
+    }
+
+    const addForwarder = () => {
+        if (!newForwarder.trim()) return
+
+        if (!validateEmail(newForwarder)) {
+            toast('لطفاً یک ایمیل معتبر وارد کنید', 'error')
+            return
+        }
+
+        if (forwarders.includes(newForwarder)) {
+            toast('این ایمیل قبلاً اضافه شده است', 'error')
+            return
+        }
+
+        onChange([...forwarders, newForwarder])
+        setNewForwarder('')
+    }
+
+    const removeForwarder = (index: number) => {
+        const newForwarders = forwarders.filter((_, i) => i !== index)
+        onChange(newForwarders)
+    }
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            e.preventDefault()
+            addForwarder()
+        }
+    }
+
+    return (
+        <div>
+            <label className='block text-sm font-medium text-gray-700 mb-2'>
+                Forwarders
+            </label>
+
+            {/* Add new forwarder */}
+            <div className='flex gap-2 mb-3'>
+                <div className='flex-1'>
+                    <Input
+                        placeholder='example@domain.com'
+                        value={newForwarder}
+                        onChange={(e) => setNewForwarder(e.target.value)}
+                        onKeyPress={handleKeyPress}
+                        className='text-left'
+                        dir='ltr'
+                    />
+                </div>
+                <Button
+                    type='button'
+                    variant='primary'
+                    onClick={addForwarder}
+                    className='w-fit'
+                    disabled={!newForwarder.trim()}
+                >
+                    <Add size={16} color='white' />
+                </Button>
+            </div>
+
+            {/* List of existing forwarders */}
+            {forwarders.length > 0 && (
+                <div className='space-y-2'>
+                    {forwarders.map((forwarder, index) => (
+                        <div key={index} className='flex items-center justify-between bg-gray-50 px-2 py-1 rounded-lg'>
+                            <span className='text-sm text-right flex-1 ' dir='ltr'>{forwarder}</span>
+                            <Button
+                                type='button'
+                                variant='secondary'
+                                onClick={() => removeForwarder(index)}
+                                className='w-fit h-9 text-red-500 hover:bg-red-50'
+                            >
+                                <Trash size={16} color='red' />
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+
+
+            {error && (
+                <div className='text-red-500 text-sm mt-1'>{error}</div>
+            )}
+
+            <div className='text-[10px] text-gray-500 mt-2 leading-4'>
+                ایمیل‌هایی که به این آدرس ارسال می‌شوند به آدرس‌های فوق نیز فرستاده خواهند شد
+            </div>
+        </div>
+    )
+}
+
+export default ForwarderManager