basic theme editor

tank-frontend/src/components/Dialog.tsx

@@ -1,12 +1,20 @@
 import {ReactNode} from 'react';
 import Column from './Column.tsx';
+import Row from './Row.tsx';
+import Button from './Button.tsx';
 import './Dialog.css';
 
-export default function Dialog({children, className}: {
-    children: ReactNode;
+export default function Dialog({children, className, title, onClose}: {
+    title?: string;
+    children?: ReactNode;
     className?: string;
+    onClose?: () => void;
 }) {
     return <Column className={'Dialog overflow-scroll ' + (className ?? '')}>
+        <Row>
+            <h3 className='flex-grow'>{title}</h3>
+            {onClose && <Button text='x' onClick={onClose} />}
+        </Row>
         {children}
     </Column>
 }

tank-frontend/src/components/Input.css

@@ -1,3 +1,3 @@
-.TextInput {
+.Input {
     padding: var(--padding-normal);
 }

tank-frontend/src/components/Input.tsx

@@ -0,0 +1,45 @@
+import {ChangeEventHandler} from "react";
+import './Input.css';
+
+export function TextInput( {onChange, className, value, placeholder, onEnter }: {
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    className?: string;
+    value: string;
+    placeholder: string;
+    onEnter?: () => void;
+}) {
+    return <input
+        type="text"
+        className={'Input ' + (className?? '')}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onKeyUp={event => {
+            if (onEnter && event.key === 'Enter')
+                onEnter();
+        }}
+    />;
+}
+
+export function NumberInput( {onChange, className, value, placeholder, onEnter }: {
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    className?: string;
+    value: number;
+    placeholder: string;
+    onEnter?: () => void;
+}) {
+    return <input
+        type="number"
+        className={'Input ' + (className?? '')}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onKeyUp={event => {
+            if (onEnter && event.key === 'Enter')
+                onEnter();
+        }}
+    />;
+}
+
+
+

tank-frontend/src/components/Row.tsx

@@ -1,9 +1,12 @@
-import {ReactNode} from "react";
+import {ReactNode} from 'react';
 
 import './Row.css';
 
-export default function Row({children, className}: { children: ReactNode, className?: string }) {
+export default function Row({children, className}: {
+    children?: ReactNode;
+    className?: string;
+}) {
     return <div className={'Row flex-row ' + (className ?? '')}>
         {children}
-    </div>
+    </div>;
 }

tank-frontend/src/components/TextInput.tsx

@@ -1,22 +0,0 @@
-import {ChangeEventHandler} from "react";
-import './TextInput.css';
-
-export default function TextInput( {onChange, className, value, placeholder, onEnter }: {
-    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
-    className?: string;
-    value: string;
-    placeholder: string;
-    onEnter?: () => void;
-}) {
-    return <input
-        type="text"
-        className={'TextInput ' + (className?? '')}
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        onKeyUp={event => {
-            if (onEnter && event.key === 'Enter')
-                onEnter();
-        }}
-    />;
-}