60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { Reorder, useDragControls } from "motion/react";
|
|
import type { RecipeIngredientSection } from "../../types/recipe";
|
|
import DeleteIconSmall from "../icons/DeleteIconSmall";
|
|
import DragIconSmall from "../icons/DragIconSmall";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface IngredientSectionProps {
|
|
section: RecipeIngredientSection;
|
|
onChange: (id: string, name: string) => void;
|
|
removeIngredientSectionHandler: (id: string) => void;
|
|
allowDelete: boolean;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function IngredientSection({ section, onChange, removeIngredientSectionHandler, allowDelete, children }: IngredientSectionProps) {
|
|
const controls = useDragControls();
|
|
|
|
return (
|
|
<Reorder.Item
|
|
key={section.Id}
|
|
value={section}
|
|
dragListener={false}
|
|
dragControls={controls}
|
|
className="select-none"
|
|
>
|
|
<div className="w-full bg-gray-100 p-3 flex items-center my-2">
|
|
<p className="text-xs md:text-sm font-semibold">Group:</p>
|
|
<input
|
|
type="text"
|
|
value={section.Name}
|
|
onChange={(e) => onChange(section.Id, e.target.value)}
|
|
placeholder="Group label"
|
|
className="mx-2 px-2 py-1 border border-gray-300 flex-grow rounded-sm min-w-1"
|
|
/>
|
|
|
|
<div className="flex gap-x-2 items-center">
|
|
<button
|
|
disabled={!allowDelete}
|
|
className="p-2 pr-0 cursor-pointer text-gray-500 hover:text-red-500 disabled:text-gray-200 disabled:cursor-not-allowed duration-300"
|
|
onClick={() => removeIngredientSectionHandler(section.Id)}
|
|
>
|
|
<DeleteIconSmall />
|
|
</button>
|
|
<div
|
|
className="p-0 cursor-pointer touch-none"
|
|
onPointerDown={(e) => {
|
|
e.preventDefault();
|
|
controls.start(e);
|
|
}}
|
|
>
|
|
<DragIconSmall />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</Reorder.Item>
|
|
);
|
|
}
|
|
|