79 lines
3.6 KiB
TypeScript
79 lines
3.6 KiB
TypeScript
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>
|
||
)
|
||
} |