Add components for Act management and integrate Electron setup

components/form/InputField.tsx

@@ -0,0 +1,92 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React from "react";
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import {faPlus, faTrash} from "@fortawesome/free-solid-svg-icons";
+
+interface InputFieldProps {
+    icon?: IconDefinition,
+    fieldName?: string,
+    input: React.ReactNode,
+    addButtonCallBack?: () => Promise<void>
+    removeButtonCallBack?: () => Promise<void>
+    isAddButtonDisabled?: boolean
+    action?: () => Promise<void>
+    actionLabel?: string
+    actionIcon?: IconDefinition
+    hint?: string,
+}
+
+export default function InputField(
+    {
+        fieldName,
+        icon,
+        input,
+        addButtonCallBack,
+        removeButtonCallBack,
+        isAddButtonDisabled,
+        action,
+        actionLabel,
+        actionIcon,
+        hint
+    }: InputFieldProps) {
+    return (
+        <div className={'flex flex-col'}>
+            <div className={'flex justify-between items-center mb-2 lg:mb-3 flex-wrap gap-2'}>
+                {
+                    fieldName && (
+                        <h3 className="text-text-primary text-xl font-[ADLaM Display] font-medium mb-2 flex items-center gap-2">
+                            {
+                                icon && <FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
+                            }
+                            {fieldName}
+                        </h3>
+                    )
+                }
+                {
+                    action && (
+                        <button
+                            onClick={action}
+                            className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-secondary/50 rounded-lg text-primary hover:bg-secondary hover:shadow-md hover:scale-105 transition-all duration-200 border border-secondary/50 font-medium"
+                        >
+                            {
+                                actionIcon && <FontAwesomeIcon icon={actionIcon} className={'w-3.5 h-3.5'}/>
+                            }
+                            {
+                                actionLabel && <span>{actionLabel}</span>
+                            }
+                        </button>
+                    )
+                }
+                {hint && (
+                    <span
+                        className="text-xs text-muted bg-secondary/30 px-3 py-1.5 rounded-lg border border-secondary/30">
+                        {hint}
+                    </span>
+                )}
+            </div>
+            <div className="flex justify-between items-center gap-2">
+                {input}
+                {
+                    addButtonCallBack && (
+                        <button
+                            className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:bg-primary-dark hover:shadow-lg hover:scale-110 shadow-md"
+                            onClick={addButtonCallBack}
+                            disabled={isAddButtonDisabled}>
+                            <FontAwesomeIcon icon={faPlus} className="w-4 h-4"/>
+                        </button>
+                    )
+                }
+                {
+                    removeButtonCallBack && (
+                        <button
+                            className="bg-error/90 hover:bg-error text-text-primary w-9 h-9 rounded-full flex items-center justify-center transition-all duration-200 hover:shadow-lg hover:scale-110 shadow-md"
+                            onClick={removeButtonCallBack}
+                        >
+                            <FontAwesomeIcon icon={faTrash} className={'w-4 h-4'}/>
+                        </button>
+                    )
+                }
+            </div>
+        </div>
+    )
+}