HAM!DREZA
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
|
|
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('blog.featured_image')}</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 |