import React, { useState } from "react"; import IconText from "../IconText"; import ButtonDivTag from "../ButtonDivTag"; import TitleSubtitle from "../TitleSubtitle"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; const CardDesign2 = ({ buttons }) => { const [dokmeha, updateDokmeha] = useState(buttons); function handleOnDragEnd(result) { if (!result.destination) return; const items = Array.from(dokmeha); const [reorderedItem] = items.splice(result.source.index, 1); items.splice(result.destination.index, 0, reorderedItem); updateDokmeha(items); } return (
{(provided) => (
{dokmeha.map((btn, index) => ( {(provided) => (
)}
))} {provided.placeholder}
)}
); }; export default CardDesign2; CardDesign2.defaultProps = { buttons: [ { id: 1, name: "پنجره", className: "bg-[#FFF7BF]", }, { id: 2, name: "کمک اولیه", className: "bg-[#DBFDFF]", }, { id: 3, name: "درب خروجی", className: "bg-[#828282]", }, { id: 4, name: "سیستم سرمایش", className: "bg-[#F6FFEB]", }, { id: 5, name: "آب سردکن", className: "bg-[#F0FFB4]", }, { id: 6, name: "سرویس بهداشتی", className: "bg-[#FFDD8E]", }, { id: 7, name: "حمام", className: "bg-[#EEEFFF]", }, { id: 8, name: "تخت", className: "bg-[#FFF5EE]", }, ], };