update 6 files

package.json

@@ -20,6 +20,7 @@
     "date-fns": "^2.28.0",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-indiana-drag-scroll": "^2.1.0",

src/App.js

@@ -82,6 +82,7 @@ import CardDesign1 from "./components/CardDesign1";
 import CustomToast from "./components/CustomToast";
 import IconText from "./components/IconText";
 import CardDesign2 from "./components/CardDesign2";
+import ButtonDivTag from "./components/ButtonDivTag";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -164,6 +165,7 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
+        {/* <ButtonDivTag /> */}
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/ButtonDivTag/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const ButtonDivTag = ({ className, text, onClick, props }) => {
+  console.log(props);
+  return (
+    <div
+      {...props}
+      onClick={onClick}
+      className={`flex items-center justify-center transiton duration-200 hover:bg-opacity-70 ${className}`}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default ButtonDivTag;
+
+ButtonDivTag.defaultProps = {
+  className:
+    "bg-darkGreenBg hover:bg-gray-900 textColor border border-lightBlueBorderColor border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4",
+  text: "اطلاعات بیشتر",
+};

src/components/CardDesign2/index.js

@@ -1,9 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
+
 import IconText from "../IconText";
-import Button from "../Button";
+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="flex flex-col bg-white shadow-sm rounded max-w-[370px] mr-20 my-20 p-4">
       <TitleSubtitle
@@ -15,14 +30,42 @@ const CardDesign2 = ({ buttons }) => {
         titleDividerWidth={"w-1.5"}
       />
       <IconText />
-      <div className="flex flex-wrap gap-y-4 justify-around mt-4">
-        {buttons.map((btn) => (
-          <Button
-            className={`${btn.className} w-5/12	 border-none px-4 py-4 text-xs rounded-sm text-white`}
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <Droppable droppableId="container">
+          {(provided) => (
+            <div
+              className="flex flex-col gap-y-4 justify-around mt-4"
+              {...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-1/2 px-1`}>
+                      <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>
   );
 };
@@ -32,34 +75,42 @@ 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]",
     },

yarn.lock

@@ -3451,6 +3451,13 @@ css-blank-pseudo@^3.0.0:
   dependencies:
     postcss-selector-parser "^6.0.7"
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-declaration-sorter@^6.0.3:
   version "6.1.3"
   resolved "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz"
@@ -6320,6 +6327,11 @@ memfs@^3.1.2, memfs@^3.2.2:
   dependencies:
     fs-monkey "1.0.3"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -7537,6 +7549,11 @@ quick-lru@^5.1.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 raf@^3.4.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
@@ -7585,6 +7602,19 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-beautiful-dnd@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
+  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-dev-utils@^12.0.0:
   version "12.0.0"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz"
@@ -7666,6 +7696,18 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-redux@^7.2.0:
+  version "7.2.8"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
+  integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 react-redux@^7.2.6:
   version "7.2.6"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz"
@@ -7881,7 +7923,7 @@ redux-thunk@^2.4.1:
   resolved "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz"
   integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
-redux@^4.0.0, redux@^4.1.2:
+redux@^4.0.0, redux@^4.0.4, redux@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz"
   integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
@@ -8851,6 +8893,11 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
+  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
+
 tmp@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz"
@@ -9084,6 +9131,11 @@ use-draggable-scroll@^0.1.0:
   resolved "https://registry.npmjs.org/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz"
   integrity sha512-mX6nT3cUqOTtA+8QUH9HfdKtzI6Oquj9QIB0wALWZYmWogNQ746MaUcmqKOKCIlt2UH6egxhSKNPiSlfEqmKhA==
 
+use-memo-one@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"