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/form/SearchInputWithSelect.tsx
+++ b/components/form/SearchInputWithSelect.tsx
@@ -0,0 +1,62 @@
+import React, {ChangeEvent} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import {SelectBoxProps} from "@/shared/interface";
+
+interface SearchInputWithSelectProps {
+    selectValue: string;
+    setSelectValue: (value: string) => void;
+    selectOptions: SelectBoxProps[];
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    inputPlaceholder?: string;
+    searchIcon: IconDefinition;
+    onSearch: () => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export default function SearchInputWithSelect(
+    {
+        selectValue,
+        setSelectValue,
+        selectOptions,
+        inputValue,
+        setInputValue,
+        inputPlaceholder,
+        searchIcon,
+        onSearch,
+        onKeyDown
+    }: SearchInputWithSelectProps) {
+    return (
+        <div className="flex items-center space-x-3">
+            <select
+                value={selectValue}
+                onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectValue(e.target.value)}
+                className="bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary outline-none transition-all duration-200 font-medium"
+            >
+                {selectOptions.map((option: SelectBoxProps) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+            
+            <div className="flex-1 relative">
+                <input
+                    type="text"
+                    value={inputValue}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
+                    placeholder={inputPlaceholder}
+                    className="w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary placeholder:text-muted/60 outline-none transition-all duration-200 pr-12"
+                    onKeyDown={onKeyDown}
+                />
+                <button
+                    onClick={onSearch}
+                    className="absolute right-0 top-0 h-full px-4 text-primary hover:text-primary-light hover:scale-110 transition-all duration-200"
+                >
+                    <FontAwesomeIcon icon={searchIcon} className="w-5 h-5"/>
+                </button>
+            </div>
+        </div>
+    );
+}