Feat/dataset notion import (#392)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/datasets/create/file-preview/index.tsx

@@ -1,18 +1,21 @@
 'use client'
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import s from './index.module.css'
 import type { File } from '@/models/datasets'
 import { fetchFilePreview } from '@/service/common'
 
-import cn from 'classnames'
-import s from './index.module.css'
-
 type IProps = {
-  file?: File,
+  file?: File
+  notionPage?: any
+  hidePreview: () => void
 }
 
 const FilePreview = ({
   file,
+  hidePreview,
 }: IProps) => {
   const { t } = useTranslation()
   const [previewContent, setPreviewContent] = useState('')
@@ -28,23 +31,27 @@ const FilePreview = ({
   }
 
   const getFileName = (currentFile?: File) => {
-    if (!currentFile) {
+    if (!currentFile)
       return ''
-    }
+
     const arr = currentFile.name.split('.')
     return arr.slice(0, -1).join()
   }
 
   useEffect(() => {
-    if (file) {
+    if (file)
       getPreviewContent(file.id)
-    }
   }, [file])
 
   return (
     <div className={cn(s.filePreview)}>
       <div className={cn(s.previewHeader)}>
-        <div className={cn(s.title)}>{t('datasetCreation.stepOne.filePreview')}</div>
+        <div className={cn(s.title)}>
+          <span>{t('datasetCreation.stepOne.filePreview')}</span>
+          <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)}>
           <span>{getFileName(file)}</span><span className={cn(s.filetype)}>.{file?.extension}</span>
         </div>