diff --git a/package-lock.json b/package-lock.json index b429b95..ee6c27d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e0eb319..bd5120f 100644 --- a/package.json +++ b/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": { diff --git a/src/components/CalculatorComponent/CalculatorComponent.css b/src/components/CalculatorComponent/CalculatorComponent.css new file mode 100644 index 0000000..06dfe9a --- /dev/null +++ b/src/components/CalculatorComponent/CalculatorComponent.css @@ -0,0 +1,5 @@ +.calculator-layout { + display: flex; + flex-direction: row; + gap: 32px; +} diff --git a/src/components/CalculatorComponent/CalculatorComponent.js b/src/components/CalculatorComponent/CalculatorComponent.js index 450e21d..ba4c179 100644 --- a/src/components/CalculatorComponent/CalculatorComponent.js +++ b/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 ( - <> +
{
- +
); }; diff --git a/src/components/CalculatorComponent/components/InputNumber/InputNumber.js b/src/components/CalculatorComponent/components/InputNumber/InputNumber.js index ce79715..2cc5bf8 100644 --- a/src/components/CalculatorComponent/components/InputNumber/InputNumber.js +++ b/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"; diff --git a/src/components/DraggableGallery/DraggableGallery.css b/src/components/DraggableGallery/DraggableGallery.css new file mode 100644 index 0000000..ef6ea36 --- /dev/null +++ b/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; +} + + diff --git a/src/components/DraggableGallery/DraggableGallery.js b/src/components/DraggableGallery/DraggableGallery.js index 312e9c7..d547c5b 100644 --- a/src/components/DraggableGallery/DraggableGallery.js +++ b/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 (
- -
) -} \ No newline at end of file + const arrayLegend = ["Тип", "Площадь", "Стоимость", "Этаж", "Cрок Сдачи"]; + const ref = useRef(); + + const { events } = useDraggable(ref, { + safeDisplacement: 20, // specify the drag sensitivity + }); + + console.log(events) + + return ( +
+
+

Избранное

+
+ {arrayLegend.map((i, index) => ( +
+
{i}
+
+ ))} +
+
+
+ +
+
+ ); +}; diff --git a/src/components/DraggableGallery/components/Gallery/Card/Card.js b/src/components/DraggableGallery/components/Gallery/Card/Card.js new file mode 100644 index 0000000..f036c5e --- /dev/null +++ b/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 ( + +
+
+ планнировка +
+
+
{card.type}
+
+ +
+
{card.square}
+
+ +
+
{card.price}
+
+ +
+
{card.floor}
+
+ +
+
{card.date}
+
+
+ +
onDrag(e)} className="drag-button"> + {pointArray.map((i, index) => ( +
+ ))} +
+ + + ); +}; diff --git a/src/components/DraggableGallery/components/Gallery/Gallery.css b/src/components/DraggableGallery/components/Gallery/Gallery.css new file mode 100644 index 0000000..99e49ad --- /dev/null +++ b/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; +} diff --git a/src/components/DraggableGallery/components/Gallery/Gallery.js b/src/components/DraggableGallery/components/Gallery/Gallery.js new file mode 100644 index 0000000..d9281b8 --- /dev/null +++ b/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 ( + + {cards.map((card, index) => ( + + ))} + + ); +}; diff --git a/src/components/DraggableGallery/components/Gallery/movebutton.svg b/src/components/DraggableGallery/components/Gallery/movebutton.svg new file mode 100644 index 0000000..a737b65 --- /dev/null +++ b/src/components/DraggableGallery/components/Gallery/movebutton.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/DraggableGallery/components/Gallery/planFlat.png b/src/components/DraggableGallery/components/Gallery/planFlat.png new file mode 100644 index 0000000..ed6dd5f Binary files /dev/null and b/src/components/DraggableGallery/components/Gallery/planFlat.png differ diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css index 7627586..e22fe45 100644 --- a/src/components/Main/Main.css +++ b/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; diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js index 643254b..6f7d213 100644 --- a/src/components/Main/Main.js +++ b/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 (
+
); };