71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { useFieldArrayFormContext } from "@/lib/FieldArrayFormProvider";
|
|
import { IButtonLink } from "@/types/IArticle";
|
|
import { TextInput } from "@/ui/TextInput";
|
|
import { Reorder } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import ArrowMoreIcon from "@/components/icons/ArrowMoreIcon";
|
|
import CloseIcon from "@/components/icons/CloseIcon";
|
|
import { IArticleInput } from "../modals/ArticleFormModal";
|
|
|
|
interface IArticleButtonLinkInputProps {
|
|
index: number;
|
|
item: IButtonLink & { id: string };
|
|
}
|
|
|
|
export function ArticleButtonLinkInput({
|
|
index,
|
|
item,
|
|
}: IArticleButtonLinkInputProps) {
|
|
const { remove, watch } = useFieldArrayFormContext<IArticleInput>();
|
|
|
|
const [title, setTitle] = useState("");
|
|
const [link, setLink] = useState("");
|
|
|
|
useEffect(() => {
|
|
const { unsubscribe } = watch(({ blocks }) => {
|
|
if (!blocks || !blocks.length || blocks[index]?.type !== "ButtonLink")
|
|
return;
|
|
setTitle(blocks[index]?.title ?? "");
|
|
setLink(blocks[index]?.link ?? "");
|
|
});
|
|
|
|
return unsubscribe;
|
|
}, [index, watch]);
|
|
|
|
return (
|
|
<Reorder.Item
|
|
value={item}
|
|
as="div"
|
|
className="p-6 space-y-4 relative border border-[#3D425C] rounded-2xl"
|
|
>
|
|
{link && title && (
|
|
<Link
|
|
href={link}
|
|
className="bg-gradient-saturated btnm w-fit flex gap-2 items-center px-6 py-4 font-medium rounded-2xl"
|
|
>
|
|
{title ?? "Название кнопки"}
|
|
<div className="text-white lg:size-[1.111vw] size-4">
|
|
<ArrowMoreIcon />
|
|
</div>
|
|
</Link>
|
|
)}
|
|
<div className="justify-stretch flex gap-4">
|
|
<TextInput
|
|
name={`blocks.${index}.title`}
|
|
placeholder="Название кнопки"
|
|
/>
|
|
<TextInput name={`blocks.${index}.link`} placeholder="Ссылка" />
|
|
</div>
|
|
<button
|
|
className="absolute top-2 right-2 p-1 cursor-pointer"
|
|
onClick={() => remove(index)}
|
|
>
|
|
<div className="text-white lg:size-[1.111vw] size-4">
|
|
<CloseIcon />
|
|
</div>
|
|
</button>
|
|
</Reorder.Item>
|
|
);
|
|
}
|