first config option!

lang/en.json

@@ -4,5 +4,11 @@
     "title": "Cultivation",
     "launch_button": "Launch",
     "gc_enable": "Connect via Grasscutter"
+  },
+  "options": {
+    "game_exec": "Set Game Executable"
+  },
+  "components": {
+    "select_file": "Select file or folder..."
   }
 }

src/ui/components/common/DirInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { open } from '@tauri-apps/api/dialog'
+import { translate } from '../../../utils/language'
 import TextInput from './TextInput'
 import File from '../../../resources/icons/folder.svg'
 
@@ -12,6 +13,7 @@ interface IProps {
 
 interface IState {
   value: string
+  placeholder: string
 }
 
 export default class DirInput extends React.Component<IProps, IState> {
@@ -19,12 +21,20 @@ export default class DirInput extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      value: props.value || ''
+      value: props.value || '',
+      placeholder: 'Select file or folder...'
     }
 
     this.handleIconClick = this.handleIconClick.bind(this)
   }
 
+  async componentDidMount() {
+    const translation = await translate('components.select_file')
+    this.setState( {
+      placeholder: translation
+    })
+  }
+
   async handleIconClick() {
     let path = await open({
       filters: [
@@ -45,7 +55,7 @@ export default class DirInput extends React.Component<IProps, IState> {
   render() {
     return (
       <div className='DirInput'>
-        <TextInput value={this.state.value} placeholder='Set Game Location...' readOnly={true} />
+        <TextInput value={this.state.value} placeholder={this.state.placeholder} readOnly={true} />
         <div className="FileSelectIcon" onClick={this.handleIconClick}>
           <img src={File} />
         </div>

src/ui/components/menu/Options.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import Checkbox from '../common/Checkbox'
-import TextInput from '../common/TextInput'
 import DirInput from '../common/DirInput'
 import Menu from './Menu'
+import Tr from '../../../utils/language'
 import './Options.css'
+import { setConfigOption } from '../../../utils/configuration'
 
 interface IProps {
   closeFn: () => void;
@@ -14,25 +14,19 @@ export default class Options extends React.Component<IProps, never> {
     super(props)
   }
 
+  setGameExec(value: string) {
+    setConfigOption('game_path', value)
+  }
+
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
         <div className='OptionSection'>
-          <div className='OptionLabel'>Test Option</div>
+          <div className='OptionLabel'>
-          <div className='OptionValue'>
+            <Tr text="options.game_exec" />
-            <Checkbox id="testOption" label="" checked={true} onChange={() => console.log('Test Option Changed')} />
           </div>
-        </div>
-        <div className='OptionSection'>
-          <div className='OptionLabel'>Test Input</div>
           <div className='OptionValue'>
-            <TextInput placeholder='Test Value...' />
+            <DirInput onChange={this.setGameExec} />
-          </div>
-        </div>
-        <div className='OptionSection'>
-          <div className='OptionLabel'>Test File Input</div>
-          <div className='OptionValue'>
-            <DirInput />
           </div>
         </div>
       </Menu>