added DraggableGallery

package-lock.json

@@ -22,6 +22,8 @@
         "react-number-format": "^5.1.2",
         "react-scripts": "5.0.1",
         "react-slider": "^2.0.4",
+        "react-use-draggable-scroll": "^0.2.3",
+        "use-draggable-scroll": "^0.1.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14561,6 +14563,17 @@
         "react": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-use-draggable-scroll": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/react-use-draggable-scroll/-/react-use-draggable-scroll-0.2.3.tgz",
+      "integrity": "sha512-sHQFlRR4QMzY4sGEAWZO2hzYi9T5aJaGR36lkOg4zhEWl01ZMkL/a59ydJeo5dR9VX0yswgJIsDe15rXjnR93w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -16331,6 +16344,17 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-draggable-scroll": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz",
+      "integrity": "sha512-mX6nT3cUqOTtA+8QUH9HfdKtzI6Oquj9QIB0wALWZYmWogNQ746MaUcmqKOKCIlt2UH6egxhSKNPiSlfEqmKhA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -27617,6 +27641,12 @@
         "prop-types": "^15.8.1"
       }
     },
+    "react-use-draggable-scroll": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/react-use-draggable-scroll/-/react-use-draggable-scroll-0.2.3.tgz",
+      "integrity": "sha512-sHQFlRR4QMzY4sGEAWZO2hzYi9T5aJaGR36lkOg4zhEWl01ZMkL/a59ydJeo5dR9VX0yswgJIsDe15rXjnR93w==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -28917,6 +28947,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-draggable-scroll": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz",
+      "integrity": "sha512-mX6nT3cUqOTtA+8QUH9HfdKtzI6Oquj9QIB0wALWZYmWogNQ746MaUcmqKOKCIlt2UH6egxhSKNPiSlfEqmKhA==",
+      "requires": {}
+    },
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

package.json

@@ -17,6 +17,8 @@
     "react-number-format": "^5.1.2",
     "react-scripts": "5.0.1",
     "react-slider": "^2.0.4",
+    "react-use-draggable-scroll": "^0.2.3",
+    "use-draggable-scroll": "^0.1.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/CalculatorComponent/CalculatorComponent.css

@@ -0,0 +1,5 @@
+.calculator-layout {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+}

src/components/CalculatorComponent/CalculatorComponent.js

@@ -1,15 +1,17 @@
+
+import './CalculatorComponent.css'
 import { useEffect } from "react";
 import { calcSlice } from "../../store/reducers/calcSlice";
 import { useSelector, useDispatch } from "react-redux";
 
 import { InputSelect } from "./components/InputSelect/InputSelect";
-import { InputNumber } from "../InputNumber/InputNumber";
+import { InputNumber } from "./components/InputNumber/InputNumber";
 import { AveragePriceApartment } from "./components/AveragePriceApartment/AveragePriceApartment";
 import { AverageSquareApartment } from "./components/AverageSquareApartment/AverageSquareApartment";
 import { ConsultationOffice } from "./components/ConsultationOffice/ConsultationOffice";
 import { ConsultationReserv } from "./components/ConsultationReserv/ConsultationReserv";
 import { Sales } from "./components/Sales/Sales";
-import { ResultBlock } from "../ResultBlock/ResultBlock";
+import { ResultBlock } from "./components/ResultBlock/ResultBlock";
 
 const INITIAL_REGION = "e5b7edfb-17ec-475f-8631-bc796ad19909";
 
@@ -30,7 +32,7 @@ export const CalculatorComponent = ({ }) => {
     };
 
     return (
-        <>
+        <div className="calculator-layout">
             <div className="input-container-main">
                 <InputSelect
                     option={filteredList}
@@ -48,6 +50,6 @@ export const CalculatorComponent = ({ }) => {
                 <ResultBlock></ResultBlock>
             </div>
 
-        </>
+        </div>
     );
 };

src/components/CalculatorComponent/components/InputNumber/InputNumber.js

@@ -1,6 +1,6 @@
 import "./InputNumber.css";
 import CurrencyInput from "react-currency-input-field";
-import { calcSlice } from "../../store/reducers/calcSlice";
+import { calcSlice } from "../../../../store/reducers/calcSlice";
 import { useDispatch } from "react-redux";
 import { useState } from "react";
 

src/components/DraggableGallery/DraggableGallery.css

@@ -0,0 +1,80 @@
+.legend-layout {
+  margin-top: 50px;
+  width: 1408px;
+  height: 586px;
+  color: #f7f7f7;
+
+  background: #17191d;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+}
+
+.legend-container {
+  width: 216px;
+  display: flex;
+  flex-direction: column;
+  padding: 48px 0 100px 48px;
+  justify-content: space-between;
+}
+
+.legend-caption {
+  margin: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 135%;
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 145%;
+  /* identical to box height, or 22px */
+
+  font-feature-settings: "tnum" on, "lnum" on;
+}
+
+.legend-item {
+  height: 46px;
+  padding: 12px 32px;
+  box-sizing: border-box;
+  border-radius: 2px 0px 0px 2px;
+}
+
+.legend-item:nth-child(odd) {
+  background: #22252a;
+}
+
+.gallery {
+  display: flex;
+  width: fit-content;
+  overflow-x: scroll;
+  height: 96%;
+  box-shadow: inset 4px 3px 6px rgba(0, 0, 0, 0.15);
+
+}
+
+.gallery::-webkit-scrollbar-track {
+  background: #22252a;
+  border-radius: 1px;
+  cursor: pointer;
+}
+
+.gallery::-webkit-scrollbar {
+  cursor: pointer;
+
+  height: 4px;
+}
+
+.gallery::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  background: #454a54;
+  border-radius: 8px;
+  height: 4px;
+}
+
+

src/components/DraggableGallery/DraggableGallery.js

@@ -1,5 +1,34 @@
+import "./DraggableGallery.css";
+
+import { Gallery } from "./components/Gallery/Gallery";
+import { useDraggable } from "react-use-draggable-scroll";
+import { useRef } from "react";
+
 export const DraggableGallery = () => {
-    return (<div className="">
-        
-    </div>)
-}
+  const arrayLegend = ["Тип", "Площадь", "Стоимость", "Этаж", "Cрок Сдачи"];
+  const ref = useRef();
+
+  const { events } = useDraggable(ref, {
+    safeDisplacement: 20, // specify the drag sensitivity
+  });
+
+  console.log(events)
+
+  return (
+    <div className="legend-layout">
+      <div className="legend-container">
+        <p className="legend-caption">Избранное</p>
+        <div className="legend">
+          {arrayLegend.map((i, index) => (
+            <div className="legend-item" key={index}>
+              <div className="legend-name"> {i}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div ref={ref} {...events} className="gallery">
+        <Gallery></Gallery>
+      </div>
+    </div>
+  );
+};

src/components/DraggableGallery/components/Gallery/Card/Card.js

@@ -0,0 +1,52 @@
+import {
+  useMotionValue,
+  Reorder,
+  motion,
+  useDragControls,
+} from "framer-motion";
+import { useEffect, useState } from "react";
+
+export const Card = ({ card }) => {
+  const [isClicked, setIsClicked] = useState(false);
+  const dragControls = useDragControls();
+  const pointArray = Array(6).fill(0);
+  const onDrag = (e) => {
+      dragControls.start(e, { snapToCursor: true });
+  };
+
+  return (
+    <Reorder.Item value={card} dragListener={false} dragControls={dragControls}>
+      <div className="card">
+        <div className="card-image-container">
+          <img className="card-image" src={card.img} alt="планнировка"></img>
+        </div>
+        <div className="card-caption">
+          <div>{card.type}</div>
+        </div>
+
+        <div className="card-caption">
+          <div>{card.square}</div>
+        </div>
+
+        <div className="card-caption">
+          <div>{card.price}</div>
+        </div>
+
+        <div className="card-caption">
+          <div>{card.floor}</div>
+        </div>
+
+        <div className="card-caption">
+          <div>{card.date}</div>
+        </div>
+      </div>
+      <motion.div className="card-button-container">
+        <div onClick={(e) => onDrag(e)} className="drag-button">
+          {pointArray.map((i, index) => (
+            <div key={Math.random(index)} className="point"></div>
+          ))}
+        </div>
+      </motion.div>
+    </Reorder.Item>
+  );
+};

src/components/DraggableGallery/components/Gallery/Gallery.css

@@ -0,0 +1,68 @@
+.card-container {
+  display: flex;
+}
+
+.card {
+  width: 256px;
+}
+
+.card-image-container {
+  box-sizing: border-box;
+  padding: 13.5px;
+}
+
+.card-caption {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 145%;
+  /* identical to box height, or 22px */
+
+  font-feature-settings: "tnum" on, "lnum" on;
+
+  padding: 12px 32px;
+  box-sizing: border-box;
+}
+
+.card-caption:nth-child(even) {
+  background: #22252a;
+}
+
+.card-image {
+}
+
+.card-button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 46px;
+  width: 100%;
+}
+
+.drag-button {
+  cursor: grab;
+  border-radius: 2px;
+  box-sizing: border-box;
+  padding: 4px 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  width: 40px;
+  flex-wrap: wrap;
+  height: 16px;
+  background-color: transparent;
+}
+
+.point {
+  background: #f7f7f7;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+}
+
+.list {
+   list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}

src/components/DraggableGallery/components/Gallery/Gallery.js

@@ -0,0 +1,88 @@
+import "./Gallery.css";
+import plan from "./planFlat.png";
+import { Reorder, useDragControls } from "framer-motion";
+import { useState } from "react";
+import { Card } from "./Card/Card";
+
+const arrayCards = [
+  {
+    id: 0,
+    type: "3-комнатная",
+    square: "133,1 м2",
+    price: "11 564 400 ₽",
+    floor: "5 из 9",
+    date: "I квартал 2024",
+    img: plan,
+  },
+
+  {
+    id: 1,
+    type: "2-комнатная",
+    square: "133,1 м2",
+    price: "11 564 400 ₽",
+    floor: "5 из 9",
+    date: "I квартал 2024",
+    img: plan,
+  },
+
+  {
+    id: 2,
+
+    type: "1-комнатная",
+    square: "133,1 м2",
+    price: "11 564 400 ₽",
+    floor: "5 из 9",
+    date: "I квартал 2024",
+    img: plan,
+  },
+
+  {
+    id: 3,
+
+    type: "3-комнатная",
+    square: "133,1 м2",
+    price: "11 564 400 ₽",
+    floor: "5 из 9",
+    date: "I квартал 2024",
+    img: plan,
+  },
+
+  {
+    id: 4,
+
+    type: "3-комнатная",
+    square: "133,1 м2",
+    price: "11 564 400 ₽",
+    floor: "5 из 9",
+    date: "I квартал 2024",
+    img: plan,
+  },
+
+  {
+    id: 5,
+
+    type: "3-комнатная",
+    square: "133,1 м2",
+    price: "11 564 400 ₽",
+    floor: "5 из 9",
+    date: "I квартал 2024",
+    img: plan,
+  },
+];
+export const Gallery = ({}) => {
+  const [cards, setCards] = useState(arrayCards);
+
+  return (
+    <Reorder.Group
+      className="list"
+      axis="x"
+      values={cards}
+      layoutScroll={true}
+      onReorder={setCards}
+    >
+      {cards.map((card, index) => (
+        <Card key={card.id} card={card}></Card>
+      ))}
+    </Reorder.Group>
+  );
+};

src/components/DraggableGallery/components/Gallery/movebutton.svg

@@ -0,0 +1,8 @@
+<svg width="40" height="16" viewBox="0 0 40 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="5" r="1" fill="#F7F7F7"/>
+<circle cx="12" cy="11" r="1" fill="#F7F7F7"/>
+<circle cx="20" cy="5" r="1" fill="#F7F7F7"/>
+<circle cx="20" cy="11" r="1" fill="#F7F7F7"/>
+<circle cx="28" cy="5" r="1" fill="#F7F7F7"/>
+<circle cx="28" cy="11" r="1" fill="#F7F7F7"/>
+</svg>

src/components/Main/Main.css

@@ -20,9 +20,6 @@
 
 .main {
   font-family: "GilroyWebRegular";
-  display: flex;
-  flex-direction: row;
-  gap: 32px;
   max-width: 1440px;
   margin: 0 auto;
   padding: 40px;

src/components/Main/Main.js

@@ -1,11 +1,13 @@
 import "./Main.css";
 import { CalculatorComponent } from '../CalculatorComponent/CalculatorComponent'
+import { DraggableGallery } from "../DraggableGallery/DraggableGallery";
 export const Main = ({ }) => {
 
 
   return (
     <div className="main">
       <CalculatorComponent></CalculatorComponent>
+      <DraggableGallery></DraggableGallery>
     </div>
   );
 };