Spaces:
Runtime error
Runtime error
File size: 2,895 Bytes
56b6519 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import { t } from 'i18next';
import PrimaryButton from '../../../../components/button/PrimaryButton';
import SelectDropdown from '../../../../components/dropdown/SelectDropdown';
import SimpleInput from '../../../../components/input/SimpleInput';
type ListItem = {
id: number;
value: string;
label?: string;
icon?: string;
};
type OptionData = {
locale: string;
value: string;
};
type OptionsCustomDataProps = {
languagesList: ListItem[];
setLanguageSelected: (value: ListItem) => void;
languageSelected: ListItem | null;
setAddOptionField: React.Dispatch<React.SetStateAction<string>>;
addOptionField: string;
optionsData: OptionData[];
setOptionsData: React.Dispatch<React.SetStateAction<OptionData[]>>;
};
export const OptionsCustomData: React.FC<OptionsCustomDataProps> = ({
languagesList,
setLanguageSelected,
languageSelected,
setAddOptionField,
addOptionField,
optionsData,
setOptionsData,
}) => {
const handlerAddOption = () => {
if (addOptionField.trim() === '') {
return;
}
setOptionsData([
...optionsData,
{
locale: languageSelected?.value ?? '',
value: addOptionField,
},
]);
setAddOptionField(''); // Limpia el campo después de agregar
};
const handlerDeleteOption = (index: number) => {
setOptionsData(prevOptionsData =>
prevOptionsData.filter((_, i) => i !== index),
);
};
return (
<div className="grid grid-cols-1 md:grid-cols-1 gap-4 content-start">
<SelectDropdown
items={languagesList}
onChange={value => setLanguageSelected(value)}
selected={languageSelected}
title={t('optionsLanguage')}
/>
<div className="flex items-center gap-2">
<div className="flex-grow">
<SimpleInput
id="addOption"
label={t('addOption')}
name="addOption"
onChange={setAddOptionField}
placeholder={t('addOption')}
type="text"
value={addOptionField}
/>
</div>
<div className="flex-shrink-0">
<PrimaryButton onClick={handlerAddOption}>+</PrimaryButton>
</div>
</div>
<div className="bg-white/5 rounded-lg">
{optionsData.map((option, index) => (
<div
className={`flex items-center gap-2 ${index !== 0 ? 'border-t-gray-600 border-t' : ''}`}
key={index}
>
<div className="flex-grow mx-2">{option.value}</div>
<div className="flex-shrink-0 p-1">
<PrimaryButton
aria-label={t('deleteOption')}
color="red"
onClick={() => handlerDeleteOption(index)}
>
<span aria-hidden="true">×</span>
</PrimaryButton>
</div>
</div>
))}
</div>
</div>
);
};
|