89 lines
4.1 KiB
TypeScript
89 lines
4.1 KiB
TypeScript
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>
|
|
)
|
|
} |