| | |
| | | |
| | | return ( |
| | | <div className='mt-6'> |
| | | <div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div> |
| | | <div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div> |
| | | <div className='mt-2 max-h-[500px] overflow-auto'> |
| | | <table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs'> |
| | | <thead className='text-text-tertiary'> |
| | | <table className='w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'> |
| | | <thead className='text-gray-500'> |
| | | <tr> |
| | | {addQueryContentVars.map((item, i) => ( |
| | | <td key={i} className='h-9 border-b border-divider-regular pl-3 pr-2'>{item.name}</td> |
| | | <td key={i} className='h-9 pl-4 border-b border-gray-200'>{item.name}</td> |
| | | ))} |
| | | </tr> |
| | | </thead> |
| | | <tbody className='text-text-secondary'> |
| | | <tbody className='text-gray-300'> |
| | | <tr> |
| | | {addQueryContentVars.map((item, i) => ( |
| | | <td key={i} className='h-9 pl-4'>{item.name} {t('share.generation.field')}</td> |
| | |
| | | </table> |
| | | </div> |
| | | <CSVDownloader |
| | | className="mt-2 block cursor-pointer" |
| | | className="block mt-2 cursor-pointer" |
| | | type={Type.Link} |
| | | filename={'template'} |
| | | bom={true} |
| | |
| | | template, |
| | | ]} |
| | | > |
| | | <div className='system-xs-medium flex h-[18px] items-center space-x-1 text-text-accent'> |
| | | <DownloadIcon className='h-3 w-3' /> |
| | | <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'> |
| | | <DownloadIcon className='w-3 h-3' /> |
| | | <span>{t('share.generation.downloadTemplate')}</span> |
| | | </div> |
| | | </CSVDownloader> |