Add components for Act management and integrate Electron setup

components/input/BackButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function BackButton(
+    {
+        text,
+        callBackFunction
+    }:{
+        text:string,
+        callBackFunction: Function;
+    }){
+
+    function callBackButton(){
+        callBackFunction();
+    }
+
+    return (
+        <div className="text-center mt-4">
+            <button
+                onClick={callBackButton}
+                className="text-muted hover:text-primary hover:scale-105 transition-all duration-200 font-medium px-3 py-1.5 rounded-lg hover:bg-primary/10"
+            >
+                {
+                    text
+                }
+            </button>
+        </div>
+    )
+}

components/input/SelectOptionField.tsx

@@ -0,0 +1,48 @@
+import React, {Dispatch, SetStateAction} from "react";
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+
+interface SelectOption {
+    label: string,
+    value: string,
+}
+
+interface SelectOptionFieldProps {
+    label: string,
+    options: SelectOption[],
+    setOptionValue: Dispatch<SetStateAction<string>>,
+    isRequired?: boolean,
+    isDisabled?: boolean,
+    icon?: IconDefinition,
+}
+
+export default function SelectOptionField(
+    {
+        label,
+        options,
+        setOptionValue,
+        isRequired = false,
+        isDisabled = false,
+        icon
+    }: SelectOptionFieldProps
+) {
+    return (
+        <div
+            className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
+            {
+                icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
+            }
+            <select onChange={(e) => setOptionValue(e.target.value)}
+                    className={'w-full bg-transparent text-text-primary border-none outline-none font-medium disabled:opacity-50 disabled:cursor-not-allowed'}
+                    required={isRequired}
+                    disabled={isDisabled}>
+                <option value={''} defaultChecked={true} hidden={true}
+                        className="bg-tertiary">{label}{isRequired ? ' *' : ''}</option>
+                {options.map((option: SelectOption) => (
+                    <option key={option.value} value={option.value}
+                            className="bg-tertiary text-text-primary">{option.label}</option>
+                ))}
+            </select>
+        </div>
+    )
+}

components/input/TextInputField.tsx

@@ -0,0 +1,68 @@
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, {Dispatch, SetStateAction, useState} from "react";
+
+export default function TextInputField(
+    {
+        label,
+        inputValue,
+        inputType,
+        setInputValue,
+        inputId,
+        isRequired = false,
+        hintMessage,
+        isDisabled = false,
+        icon
+    }:{
+        label: string,
+        inputValue: string,
+        inputType: "text" | "password" | "email" | "url" | "date" | "number",
+        setInputValue: Dispatch<SetStateAction<string>>,
+        inputId: string,
+        isRequired?: boolean,
+        hintMessage?: string,
+        isDisabled?: boolean,
+        icon?: IconDefinition,
+    }
+){
+
+    const [hintShown, setHintShown] = useState<boolean>(false);
+
+    function showHint(){
+        if (hintMessage){
+            setHintShown(true);
+        }
+    }
+    function hideHint(){
+        if (hintShown){
+            setHintShown(false);
+        }
+    }
+
+    return (
+        <div className="w-full">
+            <div
+                className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
+                {
+                    icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
+                }
+                <input
+                    type={inputType}
+                    id={inputId}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    required={isRequired}
+                    placeholder={`${label}${isRequired ? ' *' : ''}`}
+                    onFocus={showHint}
+                    onBlur={hideHint}
+                    className={'w-full bg-transparent text-text-primary border-none outline-none placeholder:text-muted/60 disabled:opacity-50 disabled:cursor-not-allowed'}
+                    disabled={isDisabled}
+                />
+            </div>
+            {
+                hintShown && hintMessage &&
+                <small className="text-muted text-xs mt-1 ml-1 block">{hintMessage}</small>
+            }
+        </div>
+    )
+}