You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

116 lines
3.1 KiB

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 (
<div className="max-h-[400px] h-fit overflow-y-auto scrollYDesign w-full flex flex-col p-4 bg-white shadow rounded mt-3">
<TitleSubtitle
subTitle={false}
title={"افراد حاضر در این سالن"}
titleClassName={"font-bold text-primary"}
titleBorderClassName={"w-1 h-5 bg-green-400 ml-1.5"}
/>
<IconText />
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="container">
{(provided) => (
<div
className="flex flex-col gap-y-4 justify-around mt-4 w-full"
{...provided.droppableProps}
ref={provided.innerRef}
id="container"
>
{dokmeha.map((btn, index) => (
<Draggable
key={btn.id}
draggableId={"e" + btn.id}
index={index}
>
{(provided) => (
<div className={`w-full`}>
<ButtonDivTag
props={{
ref: provided.innerRef,
...provided.draggableProps,
...provided.dragHandleProps,
}}
className={`${btn.className} w-full h-full text-white py-3 border-none text-xs rounded-sm`}
style={provided.draggableProps.style}
text={btn.name}
/>
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
);
};
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]",
},
],
};