| | |
| | | |
| | | const EmptyCard = React.memo(() => { |
| | | return ( |
| | | <div className='h-32 w-full shrink-0 rounded-xl bg-background-section-burn opacity-30' /> |
| | | <div className='w-full h-32 rounded-xl opacity-30 bg-background-section-burn shrink-0' /> |
| | | ) |
| | | }) |
| | | |
| | |
| | | const { t } = useTranslation() |
| | | |
| | | return ( |
| | | <div className={'relative z-0 flex h-full items-center justify-center'}> |
| | | <div className={'h-full relative flex items-center justify-center z-0'}> |
| | | <div className='flex flex-col items-center'> |
| | | <div className='relative z-10 flex h-14 w-14 items-center justify-center rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg shadow-shadow-shadow-5'> |
| | | <RiFileList2Line className='h-6 w-6 text-text-secondary' /> |
| | | <div className='relative z-10 flex items-center justify-center w-14 h-14 border border-divider-subtle bg-components-card-bg rounded-xl shadow-lg shadow-shadow-shadow-5'> |
| | | <RiFileList2Line className='w-6 h-6 text-text-secondary' /> |
| | | <Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' /> |
| | | <Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' /> |
| | | <Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' /> |
| | | <Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' /> |
| | | <Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' /> |
| | | <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' /> |
| | | </div> |
| | | <div className='system-md-regular mt-3 text-text-tertiary'> |
| | | <div className='text-text-tertiary system-md-regular mt-3'> |
| | | {t('datasetDocuments.segment.empty')} |
| | | </div> |
| | | <button |
| | | type='button' |
| | | className='system-sm-medium mt-1 text-text-accent' |
| | | className='text-text-accent system-sm-medium mt-1' |
| | | onClick={onClearFilter} |
| | | > |
| | | {t('datasetDocuments.segment.clearFilter')} |
| | | </button> |
| | | </div> |
| | | <div className='absolute left-0 top-0 -z-20 flex h-full w-full flex-col gap-y-3 overflow-hidden'> |
| | | <div className='h-full w-full absolute top-0 left-0 flex flex-col gap-y-3 -z-20 overflow-hidden'> |
| | | { |
| | | Array.from({ length: 10 }).map((_, i) => ( |
| | | <EmptyCard key={i} /> |
| | | )) |
| | | } |
| | | </div> |
| | | <div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-list-mask-bg' /> |
| | | <div className='h-full w-full absolute top-0 left-0 bg-dataset-chunk-list-mask-bg -z-10' /> |
| | | </div> |
| | | ) |
| | | } |