make App() class

src/ui/App.tsx

@@ -11,6 +11,14 @@ import ServerLaunchSection from './components/ServerLaunchSection'
 import ProgressBar from './components/common/ProgressBar'
 import MainProgressBar from './components/common/MainProgressBar'
 
+interface IProps {
+  [key: string]: never
+}
+
+interface IState {
+  isDownloading: boolean
+}
+
 const downloadHandler = new DownloadHandler()
 
 async function download(url: string, filename: string, path: string) {
@@ -26,7 +34,15 @@ async function TESTDOWNLOAD() {
   )
 }
 
-function App() {
+class App extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+    this.state = {
+      isDownloading: false,
+    }
+  }
+
+  render() {
     return (
       <div className="App">
         <Topbar />
@@ -41,5 +57,6 @@ function App() {
       </div>
     )
   }
+}
 
 export default App

src/ui/components/menu/Menu.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+interface IProps {
+  children: React.ReactNode[] | React.ReactNode;
+  className?: string;
+  heading: string;
+}
+
+export default class Menu extends React.Component<IProps, never> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className={'Menu ' + this.props.className}>
+        <div className="MenuHeading">{this.props.heading}</div>
+        {this.props.children}
+      </div>
+    )
+  }
+}

src/ui/components/menu/Options.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Menu from './Menu'
+import './Options.css'
+
+export default class Options extends React.Component<{}, never> {
+  constructor(props: Record<string, never>) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <Menu className="Options" heading="Options">
+        <div className='OptionSection'>
+          <div className='OptionLabel'>Test Option</div>
+          <div className='OptionValue'>
+            <input type="checkbox" />
+          </div>
+        </div>
+      </Menu>
+    )
+  }
+}