options panel and custom checkbox

src/ui/components/menu/Menu.css

@@ -0,0 +1,25 @@
+.Menu {
+  position: fixed;
+  z-index: 99;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  height: 70%;
+  width: 60%;
+
+  background-color: #fff;
+}
+
+.MenuInner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.MenuHeading {
+  font-size: 2rem;
+  margin: 20px;
+}

src/ui/components/menu/Menu.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import './Menu.css'
 
 interface IProps {
   children: React.ReactNode[] | React.ReactNode;
@@ -15,7 +16,9 @@ export default class Menu extends React.Component<IProps, never> {
     return (
       <div className={'Menu ' + this.props.className}>
         <div className="MenuHeading">{this.props.heading}</div>
-        {this.props.children}
+        <div className='MenuInner'>
+          {this.props.children}
+        </div>
       </div>
     )
   }

src/ui/components/menu/Options.css

@@ -0,0 +1,5 @@
+.OptionSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

src/ui/components/menu/Options.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import Checkbox from '../common/Checkbox'
 import Menu from './Menu'
 import './Options.css'
 
-export default class Options extends React.Component<{}, never> {
+export default class Options extends React.Component<Record<string, never>, never> {
   constructor(props: Record<string, never>) {
     super(props)
   }
@@ -13,7 +14,7 @@ export default class Options extends React.Component<{}, never> {
         <div className='OptionSection'>
           <div className='OptionLabel'>Test Option</div>
           <div className='OptionValue'>
-            <input type="checkbox" />
+            <Checkbox id="testOption" label="" checked={true} onChange={() => console.log('Test Option Changed')} />
           </div>
         </div>
       </Menu>