diff --git a/package.json b/package.json index 8515e99..7b2ee70 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "react": "^18.2.0", "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0", + "react-router-dom": "^6.21.3", + "react-swipeable": "^7.0.1", "react-unity-webgl": "^9.5.0", "zustand": "^4.5.0" }, diff --git a/public/images/apartment/A1M/A1M_1F.png b/public/images/apartment/A1M/A1M_1F.png new file mode 100644 index 0000000..936d98f Binary files /dev/null and b/public/images/apartment/A1M/A1M_1F.png differ diff --git a/public/images/apartment/A1M/A1M_GF.png b/public/images/apartment/A1M/A1M_GF.png new file mode 100644 index 0000000..d90ee74 Binary files /dev/null and b/public/images/apartment/A1M/A1M_GF.png differ diff --git a/public/images/apartment/A1M/A1M_P.png b/public/images/apartment/A1M/A1M_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/A1M/A1M_P.png differ diff --git a/src/components/Parameters.tsx b/src/components/Parameters.tsx new file mode 100644 index 0000000..977a4bc --- /dev/null +++ b/src/components/Parameters.tsx @@ -0,0 +1,51 @@ +import { Parameters } from "../types/appartment"; + +type ParametersProps = { + parameters: Parameters; +}; + +const Parameters = ({ parameters }: ParametersProps) => { + return ( +
+

Parameters

+
+
+
Type
+
{parameters.type}
+
+
+
+ Plot area +
+
{parameters.plotArea}
+
+
+
+ Total Build up Area +
+
+ {parameters.totalBuildUpArea} +
+
+
+
+ Total no. of Bedrooms +
+
+ {parameters.TotalCountBedroms} +
+
+
+
+ Villa Theme +
+
+ {parameters.villaTheme} +
+
+
+
+ ); +}; + +export default Parameters; diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx new file mode 100644 index 0000000..71f4bbb --- /dev/null +++ b/src/components/Slider.tsx @@ -0,0 +1,77 @@ +import { useState } from "react"; +import { useSwipeable } from "react-swipeable"; +import { SliderType } from "../types/appartment"; + +type SliderProps = { + sliders: SliderType[]; +}; + +const Slider = ({ sliders }: SliderProps) => { + const [offset, setOffset] = useState(0); + + const handleOnRight = () => { + if (offset < 0) { + setOffset((prev) => prev + 1); + } + }; + + const handleOnLeft = () => { + if (offset > 1 - sliders.length) { + setOffset((prev) => prev - 1); + } + }; + const handlers = useSwipeable({ + onSwipedRight: handleOnRight, + onSwipedLeft: handleOnLeft, + }); + + return ( +
+
+
+ {sliders.map(({ title }) => ( +

+ {title} +

+ ))} +
+
+
+
+ {sliders.map((slider) => ( +
+ +
+ ))} +
+
+
+ {sliders.map(({ title }, index) => ( +
+
+
+ ))} +
+
+ ); +}; + +export default Slider; diff --git a/src/components/ViewController.tsx b/src/components/ViewController.tsx new file mode 100644 index 0000000..940fea6 --- /dev/null +++ b/src/components/ViewController.tsx @@ -0,0 +1,76 @@ +import { useState } from "react"; +import ButtonSwipperIcon from "../icons/ButtonSwipperIcon"; +import { Parameters as ParametersType } from "../types/appartment"; +import Parameters from "./Parameters"; +import Slider from "./Slider"; +import { SwipeEventData, useSwipeable } from "react-swipeable"; +import { HandledEvents } from "react-swipeable/es/types"; + +type ViewControllerProps = { + parameters: ParametersType; +}; + +const ViewController = ({ parameters }: ViewControllerProps) => { + const { sliders } = parameters; + const [offset, setOffset] = useState(0); + const [isScroll, setIsScroll] = useState(false); + + const handleOnSwiped = (eventData: SwipeEventData) => { + if (eventData.dir === "Down") { + setOffset(1); + } + if (eventData.dir === "Up") { + // setTimeout(() => { + setOffset(0); + // }, 1000); + } + }; + + const handleOnBackClick = () => { + setOffset(1); + }; + + const handleOnTouchEnd = ({ event }: { event: HandledEvents }) => { + console.log("event", event); + }; + + const handlers = useSwipeable({ + onSwiped: handleOnSwiped, + // onSwiping:()=> + // onSwipeStart: () => setIsScroll(true), + // onSwiped: () => setIsScroll(false), + + // onSwiped: () => console.log("first"), + // onTouchEndOrOnMouseUp: handleOnTouchEnd, + // swipeDuration: 300, + preventScrollOnSwipe: true, + }); + + return ( +
+
+ +
+
+ + +
+
+ +
+
+ ); +}; + +export default ViewController; diff --git a/src/icons/ButtonSwipperIcon.tsx b/src/icons/ButtonSwipperIcon.tsx new file mode 100644 index 0000000..08ec59b --- /dev/null +++ b/src/icons/ButtonSwipperIcon.tsx @@ -0,0 +1,15 @@ +const ButtonSwipperIcon = () => { + return ( + + + + ); +}; + +export default ButtonSwipperIcon; diff --git a/src/index.css b/src/index.css index 46074ad..99a27a1 100644 --- a/src/index.css +++ b/src/index.css @@ -1,9 +1,12 @@ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@500&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; body { - font-family: "Manrope", sans-serif; + font-family: "Montserrat", sans-serif; + font-family: "Noto Sans", sans-serif; + background-color: #c7bdba; } diff --git a/src/types/appartment.ts b/src/types/appartment.ts new file mode 100644 index 0000000..bac5137 --- /dev/null +++ b/src/types/appartment.ts @@ -0,0 +1,15 @@ +type Slider = { + title: string; + image: string; +} + +type Parameters = { + type: string; + plotArea: string; + totalBuildUpArea: string; + TotalCountBedroms: number; + villaTheme: string; + sliders: Slider[]; +}; + +export type {Slider as SliderType, Parameters} \ No newline at end of file diff --git a/src/views/MainView.tsx b/src/views/MainView.tsx index a028ad5..a9ea0b3 100644 --- a/src/views/MainView.tsx +++ b/src/views/MainView.tsx @@ -1,20 +1,45 @@ import { useEffect } from "react"; import useStore from "../store/store"; -import LoaderModal from "../components/LoaderModal"; +// import LoaderModal from "../components/LoaderModal"; import { isMobile } from "react-device-detect"; +import ViewController from "../components/ViewController"; +import { Parameters } from "../types/appartment"; + +const mainViewParams: Parameters = { + type: "A1M", + plotArea: "1080 Sq.m", + totalBuildUpArea: "472 Sq.m", + TotalCountBedroms: 5, + villaTheme: "Modern", + sliders: [ + { + title: "General View", + image: "/images/apartment/A1M/A1M_P.png", + }, + { + title: "Ground Floor", + image: "/images/apartment/A1M/A1M_GF.png", + }, + { + title: "First Floor", + image: "/images/apartment/A1M/A1M_1F.png", + }, + ], +}; const MainView = () => { const { modal, setModal } = useStore(); console.log("isMobile", isMobile); useEffect(() => { - setModal(); + // setModal(); }, [setModal]); return ( <> {modal} -
add
+ {/*
add
*/} + ); }; diff --git a/yarn.lock b/yarn.lock index d848337..8a34fca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1464,7 +1464,7 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-router-dom@^6.18.0: +react-router-dom@^6.21.3: version "6.21.3" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.3.tgz#ef3a7956a3699c7b82c21fcb3dbc63c313ed8c5d" integrity sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g== @@ -1479,6 +1479,11 @@ react-router@6.21.3: dependencies: "@remix-run/router" "1.14.2" +react-swipeable@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c" + integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ== + react-unity-webgl@^9.5.0: version "9.5.0" resolved "https://registry.yarnpkg.com/react-unity-webgl/-/react-unity-webgl-9.5.0.tgz#08277bf80d0678dbd26131d2c7ea4eb05233862e"