Spaces:
Runtime error
Runtime error
File size: 2,129 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 |
import { Checkbox } from '@headlessui/react';
import { CheckIcon } from '@heroicons/react/16/solid';
import { GetCustomFieldType } from '../../../../../services/data';
export type CheckboxButtonProps = {
text: string[];
options: string[];
setCurrentCustomFields: React.Dispatch<
React.SetStateAction<GetCustomFieldType[]>
>;
id: string;
currentLanguage: string;
};
const CheckboxButtonCustom = ({
text,
options,
setCurrentCustomFields,
id,
currentLanguage,
}: CheckboxButtonProps) => {
const selectedBox = options.map((option: string) => text.includes(option));
const onChange = (index: number) => {
const values = selectedBox.map((itemMap, i) =>
i === index ? !itemMap : itemMap,
);
const selectedOptions = options.filter((_, index) => values[index]);
setCurrentCustomFields((prevFields: GetCustomFieldType[]) => {
return prevFields.map((field: GetCustomFieldType) =>
field._id === id
? {
...field,
text: field.text.map(item =>
item.locale === currentLanguage
? { locale: item.locale, value: selectedOptions }
: item,
),
}
: field,
);
});
};
return (
<div className="flex flex-col items-center">
{options.map((option: string, index: number) => (
<div
className={`w-full flex items-center ${index !== 0 ? 'mt-2' : ''}`}
key={`${option}-${index}`}
>
<Checkbox
aria-label={`Opción ${option}`}
checked={selectedBox[index]}
className="group flex items-center justify-center size-6 rounded-md bg-white/10 p-1 ring-1 ring-white/15 ring-inset data-[checked]:bg-white"
onChange={() => onChange(index)}
>
<CheckIcon className="hidden size-4 fill-black group-data-[checked]:block" />
</Checkbox>
<div className="ml-2">
<p className="text-md text-gray-200">{option}</p>
</div>
</div>
))}
</div>
);
};
export default CheckboxButtonCustom;
|