Started building react app

frontend/react/src/ui/header.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { StateButton } from './statebuttons';
+import { faPlus, faGamepad, faRuler, faPencil } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+library.add(faPlus, faGamepad, faRuler, faPencil)
+
+type HeaderProps = {
+
+}
+
+type HeaderState = {
+
+}
+
+export class Header extends React.Component<HeaderProps, HeaderState> {
+    render() {
+        return (
+          <div className='absolute top-0 left-0 h-16 w-full z-ui bg-background-steel flex flex-row items-center px-5'>
+            <div className="flex flex-row items-center gap-1">
+                <StateButton icon="fa-solid fa-plus"></StateButton>
+                <StateButton icon="fa-solid fa-gamepad"></StateButton>
+                <StateButton icon="fa-solid fa-ruler"></StateButton>
+                <StateButton icon="fa-solid fa-pencil"></StateButton>
+            </div>
+          </div>
+        );
+    }
+}

frontend/react/src/ui/statebuttons.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+
+type ButtonProperties = {
+    icon: string
+}
+
+type ButtonState = {
+    active: boolean
+}
+
+export class StateButton extends React.Component<ButtonProperties, ButtonState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            active: true
+        }
+    }
+
+    render() {
+        var computedClassName = "";
+        computedClassName += this.state.active? 'bg-white text-background-steel': 'bg-transparent text-white border-white';
+        
+        return (
+          <FontAwesomeIcon icon={this.props.icon as IconProp} className={computedClassName + " rounded w-5 h-5 p-2 border-2"} onClick={() => this.setState({active: !this.state.active})}>
+          </FontAwesomeIcon>
+        );
+    }
+}