| | |
| | | import React, { useEffect, useState } from 'react' |
| | | import { useTranslation } from 'react-i18next' |
| | | import { XMarkIcon } from '@heroicons/react/20/solid' |
| | | import Loading from '@/app/components/base/loading' |
| | | import s from './index.module.css' |
| | | import cn from '@/utils/classnames' |
| | | import type { NotionPage } from '@/models/common' |
| | |
| | | return ( |
| | | <div className={cn(s.filePreview, 'h-full')}> |
| | | <div className={cn(s.previewHeader)}> |
| | | <div className={cn(s.title, 'title-md-semi-bold')}> |
| | | <div className={cn(s.title)}> |
| | | <span>{t('datasetCreation.stepOne.pagePreview')}</span> |
| | | <div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}> |
| | | <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}> |
| | | <XMarkIcon className='h-4 w-4'></XMarkIcon> |
| | | </div> |
| | | </div> |
| | | <div className={cn(s.fileName, 'system-xs-medium')}> |
| | | <div className={cn(s.fileName)}> |
| | | <NotionIcon |
| | | className='mr-1 shrink-0' |
| | | className='shrink-0 mr-1' |
| | | type='page' |
| | | src={currentPage?.page_icon} |
| | | /> |
| | | {currentPage?.page_name} |
| | | </div> |
| | | </div> |
| | | <div className={cn(s.previewContent, 'body-md-regular')}> |
| | | {loading && <Loading type='area' />} |
| | | <div className={cn(s.previewContent)}> |
| | | {loading && <div className={cn(s.loading)} />} |
| | | {!loading && ( |
| | | <div className={cn(s.fileContent, 'body-md-regular')}>{previewContent}</div> |
| | | )} |