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/book/settings/characters/CharacterSectionElement.tsx
+++ b/components/book/settings/characters/CharacterSectionElement.tsx
@@ -0,0 +1,89 @@
+import CollapsableArea from "@/components/CollapsableArea";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {useState} from "react";
+import {faTrash} from "@fortawesome/free-solid-svg-icons";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+import {Attribute, CharacterProps} from "@/lib/models/Character";
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import {useTranslations} from "next-intl";
+
+interface CharacterSectionElementProps {
+    title: string;
+    section: keyof CharacterProps;
+    placeholder: string;
+    icon: IconDefinition;
+    selectedCharacter: CharacterProps;
+    setSelectedCharacter: (character: CharacterProps) => void;
+    handleAddElement: (section: keyof CharacterProps, element: Attribute) => void;
+    handleRemoveElement: (
+        section: keyof CharacterProps,
+        index: number,
+        attrId: string,
+    ) => void;
+}
+
+export default function CharacterSectionElement(
+    {
+        title,
+        section,
+        placeholder,
+        icon,
+        selectedCharacter,
+        setSelectedCharacter,
+        handleAddElement,
+        handleRemoveElement,
+    }: CharacterSectionElementProps) {
+    const t = useTranslations();
+    const [element, setElement] = useState<string>('');
+    
+    function handleAddNewElement() {
+        handleAddElement(section, {id: '', name: element});
+        setElement('');
+    }
+    
+    return (
+        <CollapsableArea title={title} icon={icon}>
+            <div className="space-y-3 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                {Array.isArray(selectedCharacter?.[section]) &&
+                    selectedCharacter?.[section].map((item, index: number) => (
+                        <div key={index}
+                             className="flex items-center gap-2 bg-secondary/30 rounded-xl border-l-4 border-primary shadow-sm hover:shadow-md transition-all duration-200">
+                            <input
+                                className="flex-1 bg-transparent text-text-primary px-3 py-2.5 focus:outline-none placeholder:text-muted/60"
+                                value={item.name || item.type || item.description || item.history || ''}
+                                onChange={(e) => {
+                                    const updatedSection = [...(selectedCharacter[section] as any[])];
+                                    updatedSection[index].name = e.target.value;
+                                    setSelectedCharacter({
+                                        ...selectedCharacter,
+                                        [section]: updatedSection,
+                                    });
+                                }}
+                                placeholder={placeholder}
+                            />
+                            <button
+                                onClick={() => handleRemoveElement(section, index, item.id)}
+                                className="bg-error/90 hover:bg-error w-9 h-9 rounded-full flex items-center justify-center mr-2 shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200"
+                            >
+                                <FontAwesomeIcon icon={faTrash} className="text-white w-4 h-4"/>
+                            </button>
+                        </div>
+                    ))}
+                
+                <div className="border-t border-secondary/50 mt-4 pt-4">
+                    <InputField
+                        input={
+                            <TextInput
+                                value={element}
+                                setValue={(e) => setElement(e.target.value)}
+                                placeholder={t("characterSectionElement.newItem", {item: title.toLowerCase()})}
+                            />
+                        }
+                        addButtonCallBack={async () => handleAddNewElement()}
+                    />
+                </div>
+            </div>
+        </CollapsableArea>
+    )
+}