44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import { Reorder } from 'framer-motion';
|
|
import { UseFieldArrayRemove, UseFormSetValue } from 'react-hook-form';
|
|
import { CloseIcon } from '../icons/CloseIcon';
|
|
import { MediaUploader } from '../MediaUploader';
|
|
import { IArticleFormInput } from '../modals/ArticleFormModal';
|
|
|
|
interface IArticleSliderImageInputProps {
|
|
setValue: UseFormSetValue<IArticleFormInput>;
|
|
remove: UseFieldArrayRemove;
|
|
item: Record<'img', string> & Record<'id', string>;
|
|
index: number;
|
|
imgIndex: number;
|
|
}
|
|
|
|
export function ArticleSliderImageInput({
|
|
item,
|
|
imgIndex,
|
|
index,
|
|
remove,
|
|
setValue,
|
|
}: IArticleSliderImageInputProps) {
|
|
return (
|
|
<Reorder.Item value={item} className="flex items-center" drag>
|
|
<MediaUploader
|
|
dest="blog"
|
|
setValue={setValue}
|
|
fieldName={`blocks.${index}.images.${imgIndex}.img`}
|
|
item={item}
|
|
label="Выберите изображение"
|
|
media="img"
|
|
/>
|
|
<button
|
|
className="self-start z-[1]"
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
remove(imgIndex);
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</Reorder.Item>
|
|
);
|
|
}
|