Add FileSelector to CodeEditor

src/pages/OnlineEditor.tsx

@@ -1,16 +1,29 @@
-import React from 'react'
-import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
+import React, { useState } from 'react'
+import CodeEditor from '@/components/ReactPlayground/CodeEditor'
+import { fileNameToLanguage } from '@/components/ReactPlayground/utils.ts'
+import { IFiles } from '@/components/ReactPlayground/shared.ts'
 
 const OnlineEditor: React.FC = () => {
+    const [files, setFiles] = useState<IFiles>({
+        abc: {
+            name: 'App.tsx',
+            language: fileNameToLanguage('App.tsx'),
+            value: 'const a = () => {}'
+        },
+        cde: {
+            name: 'App.css',
+            language: fileNameToLanguage('App.css'),
+            value: '.title {}'
+        }
+    })
+
     return (
         <>
-            <Editor
+            <CodeEditor
                 theme={'light'}
-                file={{
-                    name: 'App.tsx',
-                    language: 'typescript',
-                    value: 'const a = () => {}'
-                }}
+                files={files}
+                selectedFileName={'abc'}
+                onRemoveFile={(_, files) => setFiles(files)}
             />
         </>
     )