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,20 +34,29 @@ async function TESTDOWNLOAD() {
   )
 }
 
-function App() {
+class App extends React.Component<IProps, IState> {
-  return (
+  constructor(props: IProps) {
-    <div className="App">
+    super(props)
-      <Topbar />
+    this.state = {
+      isDownloading: false,
+    }
+  }
 
-      <button onClick={TESTDOWNLOAD}>download file test</button>
+  render() {
+    return (
+      <div className="App">
+        <Topbar />
 
-      <ServerLaunchSection />
+        <button onClick={TESTDOWNLOAD}>download file test</button>
 
-      <div id="DownloadProgress">
+        <ServerLaunchSection />
-        <MainProgressBar downloadManager={downloadHandler} />
+
+        <div id="DownloadProgress">
+          <MainProgressBar downloadManager={downloadHandler} />
+        </div>
       </div>
-    </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>
+    )
+  }
+}