Add components for Act management and integrate Electron setup

2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
--- a/components/input/TextInputField.tsx
+++ b/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>
+    )
+}