create discount and ads section

2025-01-20 15:36:50 +03:30
parent ad20ce5d18
commit 12865a12f2
16 changed files with 1350 additions and 1 deletions
@@ -0,0 +1,49 @@
+
+import { FC, useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Image, DocumentUpload } from 'iconsax-react'
+import { useDropzone } from 'react-dropzone'
+
+
+
+const ImageUploader: FC = () => {
+   const { t } = useTranslation('global') 
+   const [file, setFile] = useState<File>()
+      const onDrop = useCallback((acceptedFiles: File[]) => {
+           setFile(acceptedFiles[0])
+       }, [])
+       const { getRootProps, getInputProps } = useDropzone({ onDrop })
+   
+   return(
+    <>
+    <p className='mt-6 text-sm'>{t('ads.upload_picture')}</p>
+    <div
+   {...getRootProps()} 
+    className='py-12 border border-dashed border-[#8C90A3] rounded-lg mt-2 flex items-center justify-center'>
+        <div className='flex flex-col items-center space-y-4'>
+            <Image size={45} color='#8C90A3' variant="Bold" className='border-[3px] border-[#8C90A3] rounded-md'
+            />
+            <p className='text-sm text-[#8C90A3]'>
+                {
+                              file ?
+                              file.name
+                              :
+                            t('ads.to_upload_message')
+
+                }
+                </p>
+            <div className='flex gap-1'>
+                <DocumentUpload
+                    size={20}
+                    color='black'
+                />
+                <button  className='text-sm'>
+                <input {...getInputProps()} />
+                    {t('ads.upload')}</button>
+            </div>
+        </div>
+    </div>
+    </>
+   )
+}
+export default ImageUploader