| | |
| | | /> |
| | | <div ref={dropRef}> |
| | | {!file && ( |
| | | <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}> |
| | | <div className='flex w-full items-center justify-center space-x-2'> |
| | | <div className={cn('flex items-center h-20 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}> |
| | | <div className='w-full flex items-center justify-center space-x-2'> |
| | | <CSVIcon className="shrink-0" /> |
| | | <div className='text-gray-500'> |
| | | {t('datasetDocuments.list.batchModal.csvUploadTitle')} |
| | | <span className='cursor-pointer text-primary-400' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span> |
| | | <span className='text-primary-400 cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span> |
| | | </div> |
| | | </div> |
| | | {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />} |
| | | {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />} |
| | | </div> |
| | | )} |
| | | {file && ( |
| | | <div className={cn('group flex h-20 items-center rounded-xl border border-gray-200 bg-gray-50 px-6 text-sm font-normal', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}> |
| | | <div className={cn('flex items-center h-20 px-6 rounded-xl bg-gray-50 border border-gray-200 text-sm font-normal group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}> |
| | | <CSVIcon className="shrink-0" /> |
| | | <div className='ml-2 flex w-0 grow'> |
| | | <span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-gray-800'>{file.name.replace(/.csv$/, '')}</span> |
| | | <div className='flex ml-2 w-0 grow'> |
| | | <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{file.name.replace(/.csv$/, '')}</span> |
| | | <span className='shrink-0 text-gray-500'>.csv</span> |
| | | </div> |
| | | <div className='hidden items-center group-hover:flex'> |
| | | <div className='hidden group-hover:flex items-center'> |
| | | <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button> |
| | | <div className='mx-2 h-4 w-px bg-gray-200' /> |
| | | <div className='cursor-pointer p-2' onClick={removeFile}> |
| | | <RiDeleteBinLine className='h-4 w-4 text-gray-500' /> |
| | | <div className='mx-2 w-px h-4 bg-gray-200' /> |
| | | <div className='p-2 cursor-pointer' onClick={removeFile}> |
| | | <RiDeleteBinLine className='w-4 h-4 text-gray-500' /> |
| | | </div> |
| | | </div> |
| | | </div> |