From a6d5f3404c5d480752f62fce84a40100079534b3 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Mon, 9 May 2022 23:30:59 -0700
Subject: [PATCH] make App() class

---
 src/ui/App.tsx                     | 37 ++++++++++++++++++++++--------
 src/ui/components/menu/Menu.css    |  0
 src/ui/components/menu/Menu.tsx    | 22 ++++++++++++++++++
 src/ui/components/menu/Options.css |  0
 src/ui/components/menu/Options.tsx | 22 ++++++++++++++++++
 5 files changed, 71 insertions(+), 10 deletions(-)
 create mode 100644 src/ui/components/menu/Menu.css
 create mode 100644 src/ui/components/menu/Menu.tsx
 create mode 100644 src/ui/components/menu/Options.css
 create mode 100644 src/ui/components/menu/Options.tsx

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 06a341a..653c64b 100644
--- a/src/ui/App.tsx
+++ b/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() {
-  return (
-    <div className="App">
-      <Topbar />
+class App extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+    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">
-        <MainProgressBar downloadManager={downloadHandler} />
+        <ServerLaunchSection />
+
+        <div id="DownloadProgress">
+          <MainProgressBar downloadManager={downloadHandler} />
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
 
 export default App
diff --git a/src/ui/components/menu/Menu.css b/src/ui/components/menu/Menu.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/ui/components/menu/Menu.tsx b/src/ui/components/menu/Menu.tsx
new file mode 100644
index 0000000..1eca86f
--- /dev/null
+++ b/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>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/ui/components/menu/Options.css b/src/ui/components/menu/Options.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/ui/components/menu/Options.tsx b/src/ui/components/menu/Options.tsx
new file mode 100644
index 0000000..ae699a7
--- /dev/null
+++ b/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>
+    )
+  }
+}
\ No newline at end of file