hamid zarghami
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { FC, useCallback, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useDropzone } from 'react-dropzone'
|
|
|
|
|
|
type Props = {
|
|
label: string,
|
|
}
|
|
|
|
const UploadBox: FC<Props> = (props: Props) => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const [file, setFile] = useState<File>()
|
|
|
|
const onDrop = useCallback((acceptedFiles: File[]) => {
|
|
setFile(acceptedFiles[0])
|
|
}, [])
|
|
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
|
|
|
|
|
return (
|
|
<div>
|
|
<div className='text-sm'>{props.label}</div>
|
|
<div className='w-full h-10 mt-1 border border-border rounded-xl items-center px-2 flex gap-2.5'>
|
|
<button {...getRootProps()} className=' w-fit h-7 rounded-lg text-xs px-6 bg-secondary'>
|
|
<input {...getInputProps()} />
|
|
|
|
{t('select_file')}
|
|
</button>
|
|
|
|
<div className='text-description text-xs'>
|
|
{
|
|
file ?
|
|
file.name
|
|
:
|
|
t('no_select_file')
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UploadBox |