diff --git a/src/components/masterplanPage/WingDescription.tsx b/src/components/complexWingPage/FloorDescription.tsx similarity index 70% rename from src/components/masterplanPage/WingDescription.tsx rename to src/components/complexWingPage/FloorDescription.tsx index 5f53a7b..11edf82 100644 --- a/src/components/masterplanPage/WingDescription.tsx +++ b/src/components/complexWingPage/FloorDescription.tsx @@ -1,10 +1,35 @@ -const WingDescription = () => { +import { IDesctiptionFloor } from "../../types/descriptionFloor"; + +interface FloorDescriptionProps { + descriptionFloor: IDesctiptionFloor | null; +} + +const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => { return ( -
+
-

East Wing

-
+
+

+ {descriptionFloor?.floor + ? `${descriptionFloor.floor} Floor` + : " Floor"} +

+

+ {descriptionFloor?.wing} +

+
+
234 units
@@ -58,4 +83,4 @@ const WingDescription = () => { ); }; -export default WingDescription; +export default FloorDescription; diff --git a/src/components/complexWingPage/FloorSidebar/FloorLayout.tsx b/src/components/complexWingPage/FloorSidebar/FloorLayout.tsx new file mode 100644 index 0000000..aecb8fd --- /dev/null +++ b/src/components/complexWingPage/FloorSidebar/FloorLayout.tsx @@ -0,0 +1,285 @@ +import React from "react"; + +function FloorLayout() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FloorLayout; diff --git a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx new file mode 100644 index 0000000..20b9755 --- /dev/null +++ b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx @@ -0,0 +1,46 @@ +import FloorLayout from "./FloorLayout"; + +const FloorSidebar = () => { + return ( +
+
+
+

+ 11 floor +

+

East Wing

+
+
+
234 units
+
+
+
+
+
+

Studio Flex

+
+
+
+

Studio

+
+
+
+

1 Bedroom

+
+
+
+

1 Bedroom

+
+
+
+

2 Bedroom

+
+
+
+ +
+
+ ); +}; + +export default FloorSidebar; diff --git a/src/components/complexWingPage/SequenceWing.tsx b/src/components/complexWingPage/SequenceWing.tsx index 22a96b6..ec43de2 100644 --- a/src/components/complexWingPage/SequenceWing.tsx +++ b/src/components/complexWingPage/SequenceWing.tsx @@ -1,37 +1,64 @@ import { useEffect, useRef, useState } from "react"; -import WingDescription from "../masterplanPage/WingDescription"; +import FloorDescription from "./FloorDescription"; +import { IDesctiptionFloor } from "../../types/descriptionFloor"; +import SkygardenDescription from "./SkygardenDescription"; +import FloorLayout from "./FloorSidebar/FloorLayout"; +import FloorSidebar from "./FloorSidebar/FloorSidebar"; +import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar"; -interface IDesctiptionWing { - id: string; -} +const descriptions: IDesctiptionFloor[] = [ + { id: "0", floor: 26, wing: "East Wing" }, + { id: "1", floor: 17, wing: "East Wing" }, + { id: "2", floor: 25, wing: "East Wing" }, + { id: "3", floor: 24, wing: "East Wing" }, + { id: "4", floor: 23, wing: "East Wing" }, + { id: "5", floor: 22, wing: "East Wing" }, + { id: "6", floor: 21, wing: "East Wing" }, + { id: "7", floor: 20, wing: "East Wing" }, + { id: "8", floor: 19, wing: "East Wing" }, + { id: "9", floor: 18, wing: "East Wing" }, + { id: "10", floor: 16, wing: "East Wing" }, + { id: "11", floor: 15, wing: "East Wing" }, + { id: "12", floor: 14, wing: "East Wing" }, + { id: "13", floor: 13, wing: "East Wing" }, + { id: "14", floor: 12, wing: "East Wing" }, + { id: "15", floor: 11, wing: "East Wing" }, + { id: "16", floor: 10, wing: "East Wing" }, + { id: "17", floor: 9, wing: "East Wing" }, + { id: "18", floor: 8, wing: "East Wing" }, + { id: "19", floor: 7, wing: "East Wing" }, + { id: "20", floor: 6, wing: "East Wing" }, + { id: "21", floor: 5, wing: "East Wing" }, + { id: "22", floor: 4, wing: "East Wing" }, + { id: "23", floor: 3, wing: "East Wing" }, + { id: "24", floor: 2, wing: "East Wing" }, + { id: "25", floor: 1, wing: "East Wing" }, -const leftWingDescriptions: IDesctiptionWing[] = [ - { id: "0" }, - { id: "1" }, - { id: "2" }, - { id: "3" }, - { id: "4" }, - { id: "5" }, - { id: "6" }, - { id: "7" }, - { id: "8" }, - { id: "9" }, - { id: "10" }, - { id: "11" }, - { id: "12" }, - { id: "13" }, - { id: "14" }, - { id: "15" }, - { id: "16" }, - { id: "17" }, - { id: "18" }, - { id: "19" }, - { id: "20" }, - { id: "21" }, - { id: "22" }, - { id: "23" }, - { id: "24" }, - { id: "25" }, + { id: "50", floor: 26, wing: "West Wing" }, + { id: "26", floor: 25, wing: "West Wing" }, + { id: "27", floor: 24, wing: "West Wing" }, + { id: "28", floor: 23, wing: "West Wing" }, + { id: "29", floor: 22, wing: "West Wing" }, + { id: "30", floor: 21, wing: "West Wing" }, + { id: "31", floor: 20, wing: "West Wing" }, + { id: "32", floor: 19, wing: "West Wing" }, + { id: "33", floor: 16, wing: "West Wing" }, + { id: "34", floor: 15, wing: "West Wing" }, + { id: "35", floor: 14, wing: "West Wing" }, + { id: "36", floor: 13, wing: "West Wing" }, + { id: "37", floor: 12, wing: "West Wing" }, + { id: "38", floor: 11, wing: "West Wing" }, + { id: "39", floor: 10, wing: "West Wing" }, + { id: "40", floor: 9, wing: "West Wing" }, + { id: "41", floor: 8, wing: "West Wing" }, + { id: "42", floor: 7, wing: "West Wing" }, + { id: "43", floor: 6, wing: "West Wing" }, + { id: "44", floor: 5, wing: "West Wing" }, + { id: "45", floor: 4, wing: "West Wing" }, + { id: "46", floor: 3, wing: "West Wing" }, + { id: "47", floor: 2, wing: "West Wing" }, + { id: "48", floor: 1, wing: "West Wing" }, + { id: "49", floor: 17, wing: "West Wing" }, ]; const SequenceWing = () => { @@ -41,12 +68,13 @@ const SequenceWing = () => { const descriptionRef = useRef(null); const [scalePercent, setSetScalePercent] = useState(100); - const [tooltipPosX, setTooltipPosX] = useState(0); - const [tooltipPosY, setTooltipPosY] = useState(0); const [currentFloorHover, setCurrentFloorHover] = useState( null ); const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); + const [currentFloor, setCurrentFloor] = useState( + null + ); function handleResize() { setWidth(window.innerWidth); @@ -59,30 +87,25 @@ const SequenceWing = () => { ) => { const id = e.currentTarget.dataset.id; if (!id) return; + const _currentFloor = descriptions.find((desc) => desc.id === id); + if (!_currentFloor) return; + setCurrentFloor(_currentFloor); setCurrentFloorHover(id); }; const handleOnLeftFloorMouseLeave = () => { setCurrentFloorHover(null); + setCurrentFloor(null); }; + const handleOnFloorClick = () => {}; + function handleMouseMove(e: MouseEvent) { - setMousePos([e.clientX, e.clientY]); + const top = window.innerWidth / 2 - window.innerHeight / 2; + setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]); } - useEffect(() => { - if (!descriptionRef || !descriptionRef.current) return; - const descriptionElement = descriptionRef.current as HTMLDivElement; - const descWidth = descriptionElement.clientWidth + 364 + 10; - - const newX = (735 / 100) * scalePercent - descWidth - 20; - const newY = (720 / 100) * scalePercent + 20; - - setTooltipPosX(newX); - setTooltipPosY(newY); - }, [scalePercent]); - useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); @@ -101,31 +124,26 @@ const SequenceWing = () => { return (
+ {/* */} +
- - {/* {leftWingDescriptions.map((desc, index) => ( -
- -
- ))} */} + +
{ fill="#00BED7" /> { fill="#00BED7" /> { fill="#00BED7" /> { fill="#00BED7" /> { fill="#00BED7" /> { fill="#00BED7" /> { fill="#00BED7" /> { fill="#00BED7" /> { fill="#00BED7" /> { y={738} > { }; export default SequenceWing; -function handleMouseMoывапвыавыve(this: Window, ev: MouseEvent) { - throw new Error("Function not implemented."); -} diff --git a/src/components/complexWingPage/SkygardenDescription.tsx b/src/components/complexWingPage/SkygardenDescription.tsx new file mode 100644 index 0000000..9352f91 --- /dev/null +++ b/src/components/complexWingPage/SkygardenDescription.tsx @@ -0,0 +1,34 @@ +const SkygardenDescription = () => { + return ( +
+
+
+

+ Sky Garden +

+
+ 17 amenties +
+
+
+
+

Indoor

+

3 amenties

+
+
+

Outdoor

+ +

14 amenties

+
+
+
+
+
+ ); +}; + +export default SkygardenDescription; diff --git a/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx b/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx new file mode 100644 index 0000000..e0b9973 --- /dev/null +++ b/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx @@ -0,0 +1,20 @@ +interface ActivityCardProps { + icon?: React.ReactNode; + title: string; +} + +const ActivityCard = ({ icon, title }: ActivityCardProps) => { + return ( +
+
+
+

{title}

+
+
+ {icon} +
+
+ ); +}; + +export default ActivityCard; diff --git a/src/components/complexWingPage/SkygardenSidebar/SkygardenLayout.tsx b/src/components/complexWingPage/SkygardenSidebar/SkygardenLayout.tsx new file mode 100644 index 0000000..af0a392 --- /dev/null +++ b/src/components/complexWingPage/SkygardenSidebar/SkygardenLayout.tsx @@ -0,0 +1,95 @@ +function SkygardenLayout() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default SkygardenLayout; diff --git a/src/components/complexWingPage/SkygardenSidebar/SkygardenSidebar.tsx b/src/components/complexWingPage/SkygardenSidebar/SkygardenSidebar.tsx new file mode 100644 index 0000000..fcb5fd3 --- /dev/null +++ b/src/components/complexWingPage/SkygardenSidebar/SkygardenSidebar.tsx @@ -0,0 +1,100 @@ +import AmphitheatreIcon from "../../icons/activities/AmphitheatreIcon"; +import BoulderingWallIcon from "../../icons/activities/BoulderingWallIcon"; +import ChangingRoomsIcon from "../../icons/activities/ChangingRoomsIcon"; +import ChessTablesIcon from "../../icons/activities/ChessTablesIcon"; +import ClimbingRoomIcon from "../../icons/activities/ClimbingRoomIcon"; +import CommunalDiningTablesIcon from "../../icons/activities/CommunalDiningTablesIcon"; +import IndoorLapPoolIcon from "../../icons/activities/IndoorLapPoolIcon"; +import LushLandscapeIcon from "../../icons/activities/LushLandscapeIcon"; +import MultiPurposeCourtIcon from "../../icons/activities/MultiPurposeCourtIcon"; +import OutdoorCinemaIcon from "../../icons/activities/OutdoorCinemaIcon"; +import OutdoorCoworkingSpaceIcon from "../../icons/activities/OutdoorCoworkingSpaceIcon"; +import PadelPongIcon from "../../icons/activities/PadelPongIcon"; +import PingPongInATableIcon from "../../icons/activities/PingPongInATableIcon"; +import RunningWheelIcon from "../../icons/activities/RunningWheelIcon"; +import SunLoungingDeckIcon from "../../icons/activities/SunLoungingDeckIcon"; +import SuspendedLoungingNetsIcon from "../../icons/activities/SuspendedLoungingNetsIcon"; +import WellnessFeaturesIcon from "../../icons/activities/WellnessFeaturesIcon"; +import ActivityCard from "./ActivityCard"; +import SkygardenLayout from "./SkygardenLayout"; +import ZoneSlider from "./ZoneSlider"; + +const SkygardenSidebar = () => { + return ( +
+
+
+

+ Sky Garden +

+

22-23 floor

+
+
+
17 amenties
+
+
+
+
+ +
+
+
+ Indoor Amenties +
+ } + /> + } + /> + } /> +
+
+
+ Outdoor Amenties +
+ } /> + } + /> + } /> + } + /> + } + /> + } /> + } + /> + } + /> + } /> + } /> + } /> + } /> + } + /> + } + /> +
+ +
+
+ ); +}; + +export default SkygardenSidebar; diff --git a/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx b/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx new file mode 100644 index 0000000..ea81b3d --- /dev/null +++ b/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx @@ -0,0 +1,110 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { useSwipeable } from "react-swipeable"; +import { Image } from "../../../types/image"; +import { useLayoutEffect, useRef, useState } from "react"; +import Button from "../../Button"; +import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon"; +import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon"; +import { isMobile } from "react-device-detect"; + +const images: Image[] = [ + { id: "1", src: "/images/company/slider/1.png" }, + { id: "2", src: "/images/company/slider/2.png" }, + { id: "3", src: "/images/company/slider/3.png" }, +]; + +const getGapOffset = (screenWidth: number) => { + if (screenWidth > 1600) return 16; + if (screenWidth > 1280) return 24; + if (screenWidth > 640) return 16; + return 16; +}; + +const ZoneSlider = () => { + const [selectedImageIndex, setSelectedImageIndex] = useState(-1); + const [rightImageOffset, setRightImageOffset] = useState(""); + const [imageWidth, setImageWidth] = useState(0); + const imageRef = useRef(null); + + useLayoutEffect(() => { + if (!imageRef.current?.src) return; + const width = imageRef.current.width; + setImageWidth(width); + }, [imageRef.current, window.innerWidth]); + + useLayoutEffect(() => { + const screenWidth = window.innerWidth; + const gapOffset = getGapOffset(screenWidth); + + const _rightImageOffset = `${ + -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset) + }px`; + + setRightImageOffset(_rightImageOffset); + }, [imageWidth, selectedImageIndex, window.innerWidth]); + + const handlers = useSwipeable({ + onSwipedLeft: next, + onSwipedRight: prev, + trackMouse: true, + }); + + function next() { + const lastIndex = isMobile ? images.length - 2 : images.length - 3; + + if (selectedImageIndex === lastIndex + 1) return; + setSelectedImageIndex((prev) => prev + 1); + } + + function prev() { + if (selectedImageIndex === -1) return; + setSelectedImageIndex((prev) => prev - 1); + } + + return ( +
+
+
+ {images.map((image) => ( + + ))} +
+
+
+ {images.map((image, index) => ( +
+ ))} +
+
+ ); +}; + +export default ZoneSlider; diff --git a/src/components/icons/activities/AmphitheatreIcon.tsx b/src/components/icons/activities/AmphitheatreIcon.tsx new file mode 100644 index 0000000..02b704a --- /dev/null +++ b/src/components/icons/activities/AmphitheatreIcon.tsx @@ -0,0 +1,21 @@ +const AmphitheatreIcon = () => { + return ( + + + + + ); +}; + +export default AmphitheatreIcon; diff --git a/src/components/icons/activities/BoulderingWallIcon.tsx b/src/components/icons/activities/BoulderingWallIcon.tsx new file mode 100644 index 0000000..5fc077b --- /dev/null +++ b/src/components/icons/activities/BoulderingWallIcon.tsx @@ -0,0 +1,21 @@ +const BoulderingWallIcon = () => { + return ( + + + + + ); +}; + +export default BoulderingWallIcon; diff --git a/src/components/icons/activities/ChangingRoomsIcon.tsx b/src/components/icons/activities/ChangingRoomsIcon.tsx new file mode 100644 index 0000000..042766c --- /dev/null +++ b/src/components/icons/activities/ChangingRoomsIcon.tsx @@ -0,0 +1,21 @@ +function ChangingRoomsIcon() { + return ( + + + + ); +} + +export default ChangingRoomsIcon; diff --git a/src/components/icons/activities/ChessTablesIcon.tsx b/src/components/icons/activities/ChessTablesIcon.tsx new file mode 100644 index 0000000..e78a834 --- /dev/null +++ b/src/components/icons/activities/ChessTablesIcon.tsx @@ -0,0 +1,26 @@ +const ChessTablesIcon = () => { + return ( + + + + + + ); +}; + +export default ChessTablesIcon; diff --git a/src/components/icons/activities/ClimbingRoomIcon.tsx b/src/components/icons/activities/ClimbingRoomIcon.tsx new file mode 100644 index 0000000..cb88ac2 --- /dev/null +++ b/src/components/icons/activities/ClimbingRoomIcon.tsx @@ -0,0 +1,22 @@ +const ClimbingRoomIcon = () => { + + return ( + + + + ); +} + +export default ClimbingRoomIcon \ No newline at end of file diff --git a/src/components/icons/activities/CommunalDiningTablesIcon.tsx b/src/components/icons/activities/CommunalDiningTablesIcon.tsx new file mode 100644 index 0000000..0ace4ae --- /dev/null +++ b/src/components/icons/activities/CommunalDiningTablesIcon.tsx @@ -0,0 +1,22 @@ +const CommunalDiningTablesIcon = () => { + return ( + + + + + ); +}; + +export default CommunalDiningTablesIcon; diff --git a/src/components/icons/activities/IndoorLapPoolIcon.tsx b/src/components/icons/activities/IndoorLapPoolIcon.tsx new file mode 100644 index 0000000..38d0a31 --- /dev/null +++ b/src/components/icons/activities/IndoorLapPoolIcon.tsx @@ -0,0 +1,21 @@ +const IndoorLapPoolIcon = () => { + return ( + + + + ); +}; + +export default IndoorLapPoolIcon; diff --git a/src/components/icons/activities/LushLandscapeIcon.tsx b/src/components/icons/activities/LushLandscapeIcon.tsx new file mode 100644 index 0000000..6731d3b --- /dev/null +++ b/src/components/icons/activities/LushLandscapeIcon.tsx @@ -0,0 +1,34 @@ +const LushLandscapeIcon = () => { + return ( + + + + + + + + + ); +}; + +export default LushLandscapeIcon; diff --git a/src/components/icons/activities/MultiPurposeCourtIcon.tsx b/src/components/icons/activities/MultiPurposeCourtIcon.tsx new file mode 100644 index 0000000..dd525b1 --- /dev/null +++ b/src/components/icons/activities/MultiPurposeCourtIcon.tsx @@ -0,0 +1,104 @@ +const MultiPurposeCourtIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default MultiPurposeCourtIcon; diff --git a/src/components/icons/activities/OutdoorCinemaIcon.tsx b/src/components/icons/activities/OutdoorCinemaIcon.tsx new file mode 100644 index 0000000..3bbce9d --- /dev/null +++ b/src/components/icons/activities/OutdoorCinemaIcon.tsx @@ -0,0 +1,27 @@ +const OutdoorCinemaIcon = () => { + return ( + + + + + + + ); +}; + +export default OutdoorCinemaIcon; diff --git a/src/components/icons/activities/OutdoorCoworkingSpaceIcon.tsx b/src/components/icons/activities/OutdoorCoworkingSpaceIcon.tsx new file mode 100644 index 0000000..563829d --- /dev/null +++ b/src/components/icons/activities/OutdoorCoworkingSpaceIcon.tsx @@ -0,0 +1,21 @@ +const OutdoorCoworkingSpaceIcon = () => { + return ( + + + + ); +}; + +export default OutdoorCoworkingSpaceIcon; diff --git a/src/components/icons/activities/PadelPongIcon.tsx b/src/components/icons/activities/PadelPongIcon.tsx new file mode 100644 index 0000000..e081152 --- /dev/null +++ b/src/components/icons/activities/PadelPongIcon.tsx @@ -0,0 +1,18 @@ +const PadelPongIcon = () => { + return ( + + + + ); +}; + +export default PadelPongIcon; diff --git a/src/components/icons/activities/PingPongInATableIcon.tsx b/src/components/icons/activities/PingPongInATableIcon.tsx new file mode 100644 index 0000000..a831654 --- /dev/null +++ b/src/components/icons/activities/PingPongInATableIcon.tsx @@ -0,0 +1,23 @@ +const PingPongInATableIcon = () => { + return ( + + + + + ); +}; + +export default PingPongInATableIcon; diff --git a/src/components/icons/activities/RunningWheelIcon.tsx b/src/components/icons/activities/RunningWheelIcon.tsx new file mode 100644 index 0000000..d1cdabb --- /dev/null +++ b/src/components/icons/activities/RunningWheelIcon.tsx @@ -0,0 +1,26 @@ +const RunningWheelIcon = () => { + return ( + + + + + + ); +}; + +export default RunningWheelIcon; diff --git a/src/components/icons/activities/SunLoungingDeckIcon.tsx b/src/components/icons/activities/SunLoungingDeckIcon.tsx new file mode 100644 index 0000000..331df49 --- /dev/null +++ b/src/components/icons/activities/SunLoungingDeckIcon.tsx @@ -0,0 +1,21 @@ +const SunLoungingDeckIcon = () => { + return ( + + + + ); +}; + +export default SunLoungingDeckIcon; diff --git a/src/components/icons/activities/SuspendedLoungingNetsIcon.tsx b/src/components/icons/activities/SuspendedLoungingNetsIcon.tsx new file mode 100644 index 0000000..bef1ee0 --- /dev/null +++ b/src/components/icons/activities/SuspendedLoungingNetsIcon.tsx @@ -0,0 +1,19 @@ +const SuspendedLoungingNetsIcon = () => { + return ( + + + + + ); +}; + +export default SuspendedLoungingNetsIcon; diff --git a/src/components/icons/activities/WellnessFeaturesIcon.tsx b/src/components/icons/activities/WellnessFeaturesIcon.tsx new file mode 100644 index 0000000..6cfd313 --- /dev/null +++ b/src/components/icons/activities/WellnessFeaturesIcon.tsx @@ -0,0 +1,22 @@ +function WellnessFeaturesIcon() { + return ( + + + + + ); +} + +export default WellnessFeaturesIcon; diff --git a/src/index.css b/src/index.css index 295ba53..e94d0df 100644 --- a/src/index.css +++ b/src/index.css @@ -174,3 +174,28 @@ body { margin: 0; } } + +/* scrollbar */ + +::-webkit-scrollbar { + width: 5px; + height: 5px; +} + +::-webkit-scrollbar-track { + background: #fff; +} + +::-webkit-scrollbar-thumb { + background: #c7bdba; + border-radius: 99px; +} + +:fullscreen::backdrop { + background: none; +} + +body { + scrollbar-color: #c7bdba; + scrollbar-width: thin; +} diff --git a/src/types/descriptionFloor.ts b/src/types/descriptionFloor.ts new file mode 100644 index 0000000..0864ebd --- /dev/null +++ b/src/types/descriptionFloor.ts @@ -0,0 +1,7 @@ +interface IDesctiptionFloor { + id: string; + wing: string; + floor: number; +} + +export type { IDesctiptionFloor };