Optimize code

src/components/Playground/Output/Preview/index.tsx

@@ -1,4 +1,3 @@
-import React, { useRef, useState } from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
@@ -34,7 +33,7 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Preview: React.FC<PreviewProps> = ({ iframeKey, files, importMap }) => {
+const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [errorMsg, setErrorMsg] = useState('')
     const [loaded, setLoaded] = useState(false)

src/components/Playground/Output/Transform/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
@@ -13,7 +12,7 @@ interface OutputProps {
     theme?: ITheme
 }
 
-const Transform: React.FC<OutputProps> = ({ file, theme }) => {
+const Transform = ({ file, theme }: OutputProps) => {
     const [compiledCode, setCompiledCode] = useState('')
     const [errorMsg, setErrorMsg] = useState('')
 

src/components/Playground/Output/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
@@ -11,7 +10,7 @@ interface OutputProps {
     importMap: IImportMap
 }
 
-const Output: React.FC<OutputProps> = ({ files, selectedFileName, importMap }) => {
+const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (