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/SuggestFieldInput.tsx
+++ b/components/form/SuggestFieldInput.tsx
@@ -0,0 +1,79 @@
+import {SelectBoxProps} from "@/shared/interface";
+import React, {ChangeEvent, Dispatch, SetStateAction} from "react";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+
+interface SuggestFieldInputProps {
+    inputFieldName: string;
+    inputFieldIcon?: any;
+    searchTags: string;
+    tagued: string[];
+    handleTagSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleAddTag: (characterId: string) => void;
+    handleRemoveTag: (characterId: string) => void;
+    filteredTags: () => SelectBoxProps[];
+    showTagSuggestions: boolean;
+    setShowTagSuggestions: Dispatch<SetStateAction<boolean>>;
+    getTagLabel: (id: string) => string;
+}
+
+export default function SuggestFieldInput(
+    {
+        inputFieldName,
+        inputFieldIcon,
+        searchTags,
+        tagued,
+        handleTagSearch,
+        handleAddTag,
+        handleRemoveTag,
+        filteredTags,
+        showTagSuggestions,
+        setShowTagSuggestions,
+        getTagLabel
+    }: SuggestFieldInputProps) {
+    return (
+        <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+            <InputField fieldName={inputFieldName} icon={inputFieldIcon} input={
+                <div className="w-full mb-3 relative">
+                    <TextInput value={searchTags} setValue={handleTagSearch}
+                               onFocus={() => setShowTagSuggestions(searchTags.trim().length > 0)}
+                               placeholder="Rechercher et ajouter..."/>
+                    {showTagSuggestions && filteredTags().length > 0 && (
+                        <div
+                            className="absolute top-full left-0 right-0 z-10 mt-2 bg-tertiary border border-secondary/50 rounded-xl shadow-2xl max-h-48 overflow-y-auto backdrop-blur-sm">
+                            {filteredTags().map((character: SelectBoxProps) => (
+                                <button
+                                    key={character.value}
+                                    className="w-full text-left px-4 py-2.5 hover:bg-secondary/70 text-text-primary transition-all hover:pl-5 first:rounded-t-xl last:rounded-b-xl font-medium"
+                                    onClick={() => handleAddTag(character.value)}
+                                >
+                                    {character.label}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            }/>
+            <div className="flex flex-wrap gap-2">
+                {tagued.length === 0 ? (
+                    <p className="text-text-secondary text-sm italic">Aucun élément ajouté</p>
+                ) : (
+                    tagued.map((tag: string) => (
+                        <div
+                            key={tag}
+                            className="group bg-primary/90 text-white rounded-full px-4 py-1.5 text-sm font-medium flex items-center gap-2 shadow-md hover:shadow-lg hover:scale-105 transition-all border border-primary-dark"
+                        >
+                            <span>{getTagLabel(tag)}</span>
+                            <button
+                                onClick={() => handleRemoveTag(tag)}
+                                className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-white/20 transition-all group-hover:scale-110 text-base font-bold"
+                            >
+                                ×
+                            </button>
+                        </div>
+                    ))
+                )}
+            </div>
+        </div>
+    )
+}