Finish Playground

This commit is contained in:
2024-01-12 16:57:25 +08:00
parent dc64b4993c
commit ed4cef1c78
13 changed files with 156 additions and 71 deletions

View File

@@ -1,30 +1,13 @@
import React, { useState } from 'react'
import CodeEditor from '@/components/Playground/CodeEditor'
import { IMPORT_MAP_FILE_NAME, initFiles, MAIN_FILE_NAME } from '@/components/Playground/files'
import { IFiles } from '@/components/Playground/shared'
import React from 'react'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
import Preview from '@/components/Playground/Preview'
import Playground from '@/components/Playground'
import { initFiles, initImportMap } from '@/components/Playground/files.ts'
const OnlineEditor: React.FC = () => {
const [files, setFiles] = useState<IFiles>(initFiles)
const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
return (
<>
<FitFullscreen>
<FlexBox style={{ width: '100%', height: '100%' }} direction={'horizontal'}>
<CodeEditor
files={files}
onSelectedFileChange={setSelectedFileName}
selectedFileName={selectedFileName}
onAddFile={(_, files) => setFiles(files)}
onRemoveFile={(_, files) => setFiles(files)}
onRenameFile={(_, __, files) => setFiles(files)}
onChangeFileContent={(_, __, files) => setFiles(files)}
/>
<Preview iframeKey={files[IMPORT_MAP_FILE_NAME].value} files={files} />
</FlexBox>
<Playground initFiles={initFiles} initImportMap={initImportMap} />
</FitFullscreen>
</>
)